Styling photo captions with CSS Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS: Now I won’t delve too deeply into how to code your captions. Some people do it this way: <p><img src=”image.jpg” alt=”image” /><br />Caption text here</p> But apparently the proper, semantic way would be to use a definition list, like so: <dl> <dt><img src=”image.jpg” alt=”image” /></dt> <dd>Caption text here</dd> </dl> where: dl = definition list dt = definition term dd = definition definition Got that? And here’s how to accomplish it: <dl> <dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt> <dd>I love the smell of freshly sharpened pencils</dd> </dl> Me, I like my captions plain and simple- I think the photos should stand out more than the captions. will give you this: You gotta love CSS.
CSS Gradient Background – Cross Browser! You read that right. This works in: Firefox >=3.6MSIE >=5.5 (!) Oh Em Gee, I’ve got a CSS-applied Gradient. How neat is this? I mean really, this is super cool. And it degrades gracefully in older browsers and Opera. My boss Mike passed this little CSS gem to me, and now dear reader I pass it to you. I’ve condensed Darren’s CSS down to these four lines plus comments, which will give you the lovely Green-to-Black CSS gradient background you can see above. And as you may have guessed by the ‘V’ in the class name, you can also do horizontal gradients – here are some more examples for left-right gradients, and we see what happens when we apply animations to a gradiented DIV. So now we no longer need little 1px slices in the background-image property, just remember to make sure all the colors in each line of CSS match up, and that you choose a nice flat colour fallback that works with your content. As in: Oh boy, when you click on this, you’d better be sitting down. Related Posts:
Initiation au positionnement CSS : 3. position absolue et fixe La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS :
LESS « The Dynamic Stylesheet language How to do a Basic 3-Column Footer The first question I am answering (from the blog entry, Q&A: WordPress, Blogging, and More), comes from Dayze. The question is as follows: I really like the layout of your site; it’s simple but pretty :) I’m always finding alternate ways to make a 3-columned footer so I hope you can share Now you can do this one of two ways. The first would be using floats to just float each column next to each other (which is what I will be sharing), or what I am currently using is absolute positioning (granted I have room for a 4th column but not sure what I want down there yet). Float Method Add this code to your CSS (cascading style sheet): Add this code to your footer: <div class="floatleft"><h3>Heading</h3> All sorts of awesome footer goodness </div> Of course you can change the width, the margins, etc. {View a Demo} This technique works for a three column blog design, for a large header/sidebar, whatever you want to have multiple columns. I would appreciate your feedback on this tutorial!
Alternative Style: Working With Alternate Style Sheets So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. Article Continues Below Great. Styling your site#section1 Style sheets can be associated with documents using a list of link elements in the head. Persistent#section2 These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. To make the style sheet paul.css persistent, the following link element would be included in the head: Preferred#section3 These style sheets are enabled by default (they are “on” when the page is loaded). To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute. Several preferred style sheets can be grouped together by giving them identical title attributes. To make paul.css preferred, a title attribute is added, giving the default style a name. Alternate#section4 Cookies#section7
Le modèle des boîtes Contenu Le modèle des boîtes de CSS décrit les boîtes rectangulaires qui sont générées pour les éléments de l'arbre du document et qui sont assemblées selon le modèle de mise en forme visuel. La boîte de page, qui en représente un cas particulier, est décrite plus en détails au chapitre sur les médias paginés. 8.1 Les dimensions des boîtes Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d' espacement , une aire de bordure et une aire de marge ; Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner : On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche (N.D.T. margin-left), "ED" mis pour espacement droit (N.D.T. padding-right), "BH" mis pour bordure haute (N.D.T. border-top), etc.). Le bord du contenu ou bord interne Celui-ci entoure le rendu du contenu de l'élément. Le bord de l'espacement
Creating Stylish Responsive Form With CSS3 and HTML5 #buttons #submitbtn { display: block; float: left; height: 3em; padding: 0 1em; border: 1px solid; outline: 0; font-weight: bold; font-size: 1.3em; color: #fff; text-shadow: 0px 1px 0px #222; white-space: nowrap; word-wrap: normal; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: #5e890a #5e890a #000; -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); box-shadow: inset 0 1px 0 rgba(256,256,256, .35); background-color: rgb(226,238,175); background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
Dynamic Drive CSS Library- Arrow Green Vertical Menu Arrow Green Vertical Menu Author: Ian Main (with changes by Dynamic Drive) Arrow Green Menu is a vertical list based menu that uses a single background image to create 3 distinct states, by shifting the image vertically to reveal a different style. The last state is user applied, by giving the desired element a CSS class of ".selected". Demo: Single image used (two flavors): The CSS: Code Info Rate this code: Date Posted: 09/15/2008 Revision History: None Usage Terms: Click here Your Comments (35) Got a question or need help customizing this CSS code? 60 Clean and Minimal Websites for Inspiration During the last few months we have looked at using negative space and minimalist design. Today we bring you 60 of the best-looking minimalistic sites currently on the world wide web. Sit back and get inspired… Minimal Design Keeping things simple is the whole purpose of minimal design. Why overcomplicate what's already a very full web with thousands more links and buttons?! Some of the sites have gone completely minimal without any effects apart from well laid out content, where as others choose to display the huge amount of content with sliders, drop downs and some very uniquely designed objects. Minimal design is actually a lot more difficult to achieve than you might think; keeping your designs clean but bursting with important information is a fine balance. 1: TouchTech Top feature: I love the color scheme, but the way the circles pop out from the cloud on loading the site is really funky. 2: Weltunit Top feature: Well displayed products make this site straight to the point. 3: Polar Gold
Mise en forme CSS d'un formulaire accessible - CSS Debutant Par défaut, les formulaires ne sont pas folichons. Pourtant, quel site n'a pas son formulaire ? (euh... mammouthland ?!!) Dès lors, la tentation est grande de mettre les champs dans des tableaux pour les aligner, et de rajouter du javascript pour un effet focus ou se passer un bouton d'envoi. Mais avec les CSS, on peut améliorer l'aspect d'un formulaire et rester accessible ! Fonctionne avec : Firefox ; SeaMonkey MSIE 6+ Opéra Safari, Chrome Attributs utilisés : background-color border, border-radius box-shadow color cursor display font-family, font-size, font-weight margin padding width Les formulaires sont tristounets, et leur mise en forme n'est pas très jolie.En voici la preuve : Grâce aux feuilles de style, on peut facilement égayer tout cela. Exemple Pour commencer, regardons le code HTML de plus près : Code (X)HTML <form action="toto.php" method="post" ><fieldset><legend> A propos des CSS : </legend><p>Savez-vous ce que veut dire CSS ? Code CSS Le résultat sera alors le suivant : Focus Haut
WOW Slider : jQuery Image Slider & Gallery Css and Web Design Community News