CSS Front-end Frameworks with comparison - By usabli.ca. Devoth's HEX 2 RGBA Color Calculator. CSS3 Create - Démos, tutoriels et expériences CSS3 : menus, galerie photos, interfaces web. BonBon Buttons - Sweet CSS3 buttons. There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store.
No, wait! Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons Accessibility Addingrole="button" makes it more accessible. Looks I tried to avoid any images but couldn't resist adding a PNG for the noise. A border-radius doesn't always need to be rounded. For the colors HSL values are used. I tried to simulate different materials. The glossy shape is created using an :after element with a gradient background on top. Flexibility Here all the optional class names if you wanna play around with -webkits Inspector or Firebug: Queen Rain There is one thing I'm kinda sad about.
Note. CSS3 Click Chart | CSS3 Browser Support and Information. Download free CSS templates - Free CSS Templates. Data Tables and Cascading Style Sheets Gallery. What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering.
There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L. PrefixMyCSS - Prefix your CSS3 code. Instantly! Animate.css - a bunch of plug-and-play CSS animations. CSS Scroll Effects. Hover avec transitions – Réaliser un effet de hover progressif avec les transitions en CSS3. Création d’un hover progressif Un hover progressif ? Je n’ai pas trouvé mieux pour expliquer cet effet pourtant si simple. Plutôt que de gérer un hover ON/OFF, ici le :hover s’applique progressivement, plus précisément, il disparait progressivement. On peut aussi parler de hover temporisé.
De plus, l’effet de transition progressive est appliqué sur un dégradé. Pour réaliser cela, on applique tout d’abord un dégradé sur chaque élément de liste <li>. Puis, sur chaque lien est appliqué un fond de couleur (gris) et lors du :hover, on fait disparaitre ce fond avec les transitions. Obtenez plus d’infos sur l’utilisation des dégradés. Les coins arrondis Dans cette démo, j’utilise également border-radius avec les pseudo-classes :first-child et :last-child pour arrondir le coin supérieur droit du premier <li> et le coin inférieur droit du dernier <li>. Pour la création de la petite flèche, suivez le tutoriel d’utilisation des bordures.
Experimental CSS3 Animations for Image Transitions. « Previous Demo: Item Blur Effect Images by Joanna Kustra Back to the Codrops Article next.