CSS3
Technologie CSS3 Feb 14
Get flash to fully experience Pearltrees
Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3 !
Coding Kung-fu: 35 Graphics Built Purely With CSS3
Pure CSS social media icons (experimental) – Nicolas Gallagher
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. As a result, there should be support for screenreaders or users with CSS disabled. 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.
Pure CSS speech bubbles – Nicolas Gallagher
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. 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. The key is to use the :before and/or :after pseudo-elements to produce basic shapes. By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations.The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.
Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style
CSS3 Patterns Gallery
Submission guidelines If you have a new pattern to submit, please send a pull request . However, please bear in mind that I can't accept all submissions, sorry for that. For a pattern to be accepted, the following factors are considered (in descending order of importance):
CSS Variables Module Level 1
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS level 3 relating to variables. It includes and extends the functionality of CSS level 2 [CSS21] , which builds on CSS level 1 [CSS1] . The main extensions compared to level 2 are the introduction of the variable as a new primitive value type that is accepted by all properties. Status of this document
Hands On: 3D Transforms
Original “CSS 3D Transforms are an enhancement to CSS Transforms which provides transforms in three dimensions. Note that while ‘transform’ uses a three-dimensional coordinate system, the elements themselves are not three-dimensional objects. Instead, they exist on a two-dimensional plane (a flat surface) and have no depth.”
Zocial | CSS3 Button Set
On the parent element, add a class of "zocial" and a class for the button you need, in this case "facebook". Be sure to wrap your button text in a span tag as shown:
background-image: linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -o-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -moz-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -webkit-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -ms-linear-gradient(bottom, rgb(237,223,51) 5%, rgb(255,255,77) 53%, rgb(255,255,108) 77%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.05, rgb(237,223,51)), color-stop(0.53, rgb(255,255,77)), color-stop(0.77, rgb(255,255,108)) );
CSS3 Gradient Generator
Firefox has performance issues with some of the CSS3 features that make this site awesome! But it will get there. If you have any ideas on how to improve it now, contact me .
How to draw the Magento logo with 100% CSS. No javascript! No images!
via Ad Packs animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Animate.css - a bunch of plug-and-play CSS animations
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?
How to Create 3D Text With CSS3 » SitePoint
What’s so great? Shadows are cool. We started out having to create our shadows in Photoshop and attaching them as background images. Now our lives are made easier with CSS. But really, all we can do is add gratuitous amounts of box shadows to our elements, right? Or, we can only really add unnecessary shadows to our text, right?