CSS

CSS3 : 9 morceaux de code prêts à l'emploi - css3-ressource. Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, Je vous propose ici, une petite sélection de "snippets" CSS3, ce sont des portions de codes réutilisables à utiliser dans vos projets.

Il peut arriver qu'on recherche à réaliser quelque chose en CSS3 bien que ce langage soit encore assez "jeune", j'entends par là, très peu utilisé / utilisable dans des projets de grande envergure (compatible IE). Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, alors pourquoi réinventer la roue ? Je vous propose ici, une petite sélection de "snippets". Bien qu'il s'agisse de codes dit réutilisables, il faudra très certainement repasser dessus afin de faire quelques ajustements pour qu'ils correspondent à vos besoins N'oubliez pas que certaines propriétés CSS3 utilisés dans ces snippets, ne sont pas comprises par tous les navigateurs et que certaines nécessitent l'utilisation de préfixes.

Effet feuilles superposées n°1 Démo | Source. Original Hover Effects with CSS3. The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way.

We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image.

<div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3. How To: Resizeable Background Image.

Published by Chris Coyier If you are looking for how to do FULL SCREEN BACKGROUND IMAGE, go here. My friend Richard recently came to me with a simple CSS question: Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Wow, that's a tall order. Finished Project: What's The Weather? Go ahead and resize your browser window around and notice how the image will resize to fit. First Attempt Well my first thought was that this really needs to be a CSS background-image. You guessed it, jQuery. Second Attempt (better) While the first attempt did a decent job, it failed at the most fundamental level: it wasn't "resizeable". We can, again, use jQuery and the dimensions plugin to get our browser window's width. Third Attempt (best) Forget this javascript business! See a demo of this in action.

More about WhatsTheWeather.net. 10 Incredibly Useful CSS Tricks You Should Know. Here are 10 incredibly useful CSS tricks that will help you design great web interfaces.

You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. 1. Change Text Highlight Color You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers like Safari or Firefox. ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; ::-moz-selection{ /* Firefox */ 2. Firefox usually hides the vertical scrollbar if size of the content is less than the visible window but you can fix that using this simple CSS trick. 3.

While most of the internet users prefer to read content online but some of your users might like to print your article. 4. Experienced CSS programmers are usually aware of this but beginners do miss out on this! 5. .header{ text-indent:-9999px; background:url('someimage.jpg') no-repeat; width:500px; 6. #container{ height:auto ! 7. 8.