Un outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle.
La version Lite est gratuite.
www.topstyle4.com
Un outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle.
body{width:100%;}
body{width:90%;margin:auto;min-width:600px;max-width:2000px}
Parfois, on voudrait définir une hauteur verticale à un élément.
html,body,div#corps,div#tous_mes_elements{height:100%}
Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur.
Pour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site.
<img class="photo" autres attributs...>et vous pourrez ainsi, mieux comprendre le fonctionnement, tester et ... adopter !
.photo {
background-color:#fafbfc;
border:1px solid #b0b0b0;
margin:0 0 10px 10px;
padding:5px;
}
.photoadroite {
border: 5px solid #b0b0b0;
margin: 5px 6px 15px 6px;
}
.photoagauche {
border : 5px solid #b0b0b0;
float : left;
margin : 5px 15px 6px 15 px;
}
div#photoflot p{
margin:0;
padding:0;
text-align:justify;
}
div#photoflot img{
float:left;
background-color:#fafbfc;
border:1px solid #b0b0b0;
margin:0 0 10px 10px;
padding:5px;
}
hr{
clear:left;
}
<div id="photoflot"><img attributs...> <p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien...</p> </div>
/* Encadrer le texte autour d'une image à droite */
.rightimg, .leftimg, .centreimg img {
border:1px solid #AAAAAA;
background-color:#E9E9E9;
padding:3px;
margin:6px;
}
.rightimg {float:right;}
.leftimg {float:left;}
div.centreimg {
text-align:center;
}
<img class="rightimg" attributs...>Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis...
La propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web.
body{
cursor:crosshair;
}
body{
cursor: crosshair;
}
img{
cursor: wait;
}
a:link{
cursor: pointer;
}
cursor: url('votre_curseur_perso.cur'), pointer;
<div style="filter:alpha(opacity=50); opacity:0.5;">........</div>
<div style="background-color: rgba(255, 0, 0, 0.5)"> </div>Ici, la couleur sera rouge transparente.
<div style="position: relative; z-index: 10;"> <div style=" background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; opacity:0.2;"></div> </div>
a.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
text-decoration:none
}
a.info:hover {z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span
{
display:block;
position:absolute;
top:2em; left:2em; width:10em;
border:1px solid #0cf;
background-color:#555; color:#fff;
}
Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>.
span.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
cursor: pointer;
}
#mondiv {
border:8px solid #000000;
-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;
padding: 5px ;
}
#mon-div {
border-image: url(border.png) 27 27 27 27 round round;
}
#mon_div {
border-image: url(border.png) 27 27 27 27 stretch stretch;
}
#conteneur {
-moz-border-radius: 15px; /* Préfixe Moz pour Mozilla (non valide W3C)*/
border-radius: 15px; /* Aucun préfixe pour les navigateurs qui comprennent la propriété sans préfixe (valide W3C) */
}
.ombre {
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
}
.ombre_2 {
box-shadow: -10px -10px 0px #000000;
border-radius: 5px;
padding: 5px 5px 5px 15px;
}
-Webkit-background-origin / -moz-background-origin -Webkit-background-clip / -moz-background-clip
background-origin background-clip
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;
#mon_div_hsl {
background-color: hsl(240,100%, 50%);
}
#mon_div_opaque {
opacity:0.1; /* ou 10% */
}
#mon_texte_ombre {
text-shadow: 2px 2px 2px #000;
}
conteneur {
overflow: hidden:
}
conteneur {
word-wrap: break-word;
}
border-style: valeur;
border-width: valeur;
