Animate.css | Just-add-water CSS Animations. Holmes.css - CSS Markup Detective. What does it do? The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, such as name attributes on inputs (lots of these) Potentially improvable markup, such as links with href="#" Deprecated and Non-W3C Elements - see W3C.org's article on obselete tags Non-W3C Attributes - as above, just the most important ones since there are MANY Thanks to Anthony Mann, holmes now displays an informative error message when you hover over the element.
Support for :after/::after on images is non-existent however in most browsers. How do I use it? Simply download a version of the CSS, minified or normal (with docs), and include a stylesheet link to it on your page. Or copy the contents into one of your own stylesheets. In terms of configuration, such as changing the flag colours: go nuts! Why should I use it? Browser Support Works 100% in. CSS Filters in the Real World — Le ministère de l. Filter effects landed in WebKit quite some time ago, but it’s never easy to find an application in the real World for the new CSS hotness, so I never had the chance to actually experiment with them. When I finally did, I certainly did not expect that it would come at a cost… I really wanted to fiddle around with filter effects in a proper, real World context.
A few weeks ago, I decided to tweak our modal box script to add a blur effect to the overlay. How complicated could that be? I simply applied a blur class to an element wrapping the entire site (except the modal box itself) to blur the contents of the page sitting below the modal box: And here is the expected effect (with and without blur): We sat down with the graphic designer and the UX designer, played around with it a little and thought “this is pretty cool, let’s keep it!”. On the left of this graph, blur is on, with a very high painting time of approximatively 250 ms. And it worked! Create Custom Icons for Twitter Bootstrap Easily - Tutorial. Twitter bootstrap is one of the most effective frameworks available online at the moment to speed up frontend web development process. We have covered it in our previous post before, we reckon it’s the ultimate frontend framework which covers almost all UI.
It has base CSS, grid layout, responsive layout, general base styling for all HTML elements such as buttons, form, table, a good collection of UI components and a dozen of javascript plugins. Also, there are quite a few extensions such as extra javascript plugins, themes, skin, generators available online for Twitter bootstrap, for more useful tools that extend the capability, you can read from this post – 18 Useful Twitter Boostrap Goodies You Should Know.
Currently, this bootstrap is using icons provided by Glyphicons, it’s minimal and simple icons. However, it isn’t attractive enough, and some icons  are missing, so in this tutorial, we are going to show you how to make your own Twitter bootstrap icon sets. Our main ingredients: Timed Notifications with CSS Animations. A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear. View demo Download source In today’s tip we’ll show you how to create a simple timed notification with CSS animations. The idea is to show a notification or alert for a specific duration and then make it disappear. We’ll use a little progress indicator to show how much time is left before the box disappears.
You definitely saw it already somewhere, I discovered it on buysellads.com where timed notifications are shown i.e. after saving some settings. For the markup we’ll simply have a division with a message inside and with an additional division for the little progress bar: The notification box is going to have the classes tn-box and tn-box-color-1 which will be used for defining different colors. Then we define the style of the box: We’ll set the box to display: none and give it 0 opacity. And that’s all! CSS3 Generator - By Peter Funk & Eric Hoffman. Web Fonts. Coding Kung-fu: 35 Graphics Built Purely With CSS3. Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.
With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. RSS Feed Icon RSS Feed Icon built with CSS3, exclusively from Hongkiat! Apple iMac Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.
Apple Keyboard It’s Apple Keyboard built with CSS3! Apple iPhone Oh, one more thing: iPhoneCSS3. Cherry Blossom Coffee Cup A tiring day? More. 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! Before you click that download button and try to use them on your site, please also read the flaws. 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 There is one thing I'm kinda sad about. Note. Pure CSS social media icons (experimental) This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. The image below shows you the final appearance in modern browsers.
This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. I’ve also included basic text in the title attribute of each link to provide information for users who may not be familiar with what service a specific icon represents. This is an experiment that uses CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers.
Example code The technique I’ve used is much the same as the one used for the Pure CSS speech bubbles. Pure CSS speech bubbles. Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects. Demo: Pure CSS speech bubbles Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
Progressive enhancement with pseudo-elements With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this: Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this: I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. Example code A note on progressive enhancement. CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request.
Does it present a new technique? Meowww! | Demo Studio | Mozilla Developer Network. CSS Variables Module Level 1. Abstract This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction This section is not normative. Large documents or applications (and even small ones) can contain quite a bit of CSS. 2 Defining Custom Properties: the '--*' family of properties. Hands On: 3D Transforms. Zocial | CSS3 Button Set. CSS3 Gradient Generator. CSS3 Generator. How to draw the Magento logo with 100% CSS. No javascript! No images! Animate.css - a bunch of plug-and-play CSS animations. CSS3 Loading Animation. How to Create 3D Text With CSS3. We’ve already seen how the CSS3 text-shadow property can be used to create glowing and blurred text. Today, we’re going to push the property to its limits and enter the realm of 3D: This is achieved without graphics, plugins, or canvas trickery. Don’t believe me? Take a look at the example page in Firefox, Chrome, Safari or Opera (sorry IE users — you’ll need to wait for version 10).
The depth is created with multiple text-shadows. A few blurred shadows are then applied to make the 3D effect more realistic. The demonstration page shows an example and contains the full source code. OK, so it’s a lovely effect but that’s a lot of CSS code for your weary typing fingers. Contributing Editor Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques. CSS Box Shadow & Text Shadow Experiments - ZURB Playground - ZURB.com. CSS3 properties explained | css3files.com. Box-shadow - MDN Docs. Try it box-shadow: 10px 5px 5px red; box-shadow: 60px -16px teal; box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2); box-shadow: inset 5em 1em gold; box-shadow: 3px 3px red, -1em 0 0.4em olive; <section id="default-example"><div class="transition-all" id="example-element"><p>This is a box with a box-shadow around it.
Syntax css /* Keyword values */ box-shadow: none; /* A color and two length values */ box-shadow: red 60px -16px; /* Three length values and a color */ box-shadow: 10px 5px 5px black; /* Four length values and a color */ box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%); /* inset, length values, and a color */ box-shadow: inset 5em 1em gold; /* Multiple shadows, separated by commas */ box-shadow: 3px 3px red inset, -1em 0 0.4em olive; /* Global values */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: revert-layer; box-shadow: unset; Specify a single box-shadow using: To specify multiple shadows, provide a comma-separated list of shadows. Values <color> Optional html. CSS3 Buttons | Simple CSS3 framework for creating GitHub style button links. Les transformations en CSS3. Les différents exemples qui seront présentés peuvent avoir un point d'origine différent si on le spécifie, grâce à la propriété transform-origin.
Cette propriété prend deux types de valeurs soit numérique (100 px, 50 %...) soit alphabétique (left, top, right, bottom). Voici un exemple : -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; ou -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; Par défaut, le point d'origine est top left.
La propriété transform autorise plusieurs valeurs de transformation à la suite. -webkit-transform: skew(30deg, 15deg) translate(10px, 0px) rotate(-30deg); -moz-transform: skew(30deg, 15deg) translate(10px, 0px) rotate(-30deg); -o-transform: skew(30deg, 15deg) translate(10px, 0px) rotate(-30deg); transform: skew(30deg, 15deg) translate(10px, 0px) rotate(-30deg); Exemple: transform: scaleX(2) scaleY(1); glissement horizontal : CSS3 Media Queries - Adapter un site à plusieurs résolutions d'écran. Les Medias Queries sont des propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions. Imaginons que vous ayez développé un site web adapté aux résolutions classiques: 1024px / 1280px de largeur, qu'avec la démocratisation des smartphones et tablettes, vous souhaitiez rendre votre site compatible sur ces écrans, sans toucher au HTML...
Grâce aux CSS3 medias queries, extensions des types media en CSS2 (print, screen), c'est possible ! Voici quelques exemples de medias queries pratiques que vous pourriez utiliser sur vos prochaines réalisations web: Adapter le style de la page web en fonction des dimensions du navigateur via les medias queries Il peut être intéressant de connaître les dimensions de la zone d'affichage du navigateur de notre visiteur pour adapter au mieux la taille des listes, colonnes etc. Voici comment c'est possible en quelques lignes d'assigner un style particulier pour les navigateurs ayant pour largeur mini 400px et maxi 700px 1. 1. 2. 6. 1. I Shot the Serif - Free Fonts.
Welcome to I Shot the Serif, the webby home of Matthew Welch's fonts. My fonts are all free and available under an MIT-style license. Menu flexible en onglets en utilisant la propriété css3 border-image | Blog de Stéphanie Walter, webdesigner, intégrateur web, amoureuse des pixels. Understanding border-image. CSS3 Border Image Experiments : Nora Brown Design. Osez HTML5 et CSS3 ! - Alsacréations.