CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS Triangle You can make them with a single div. It's nice to have classes for each direction possibility. The idea is a box with zero width and height. Examples Dave Everitt writes in: For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width dafont.com Menú desplegable con jQuery Los menús desplegables siempre fueron un componente de los mas útiles cuando lo que buscamos es la economía de espacios, son de muy fácil entendimiento por parte de los usuarios y su diagrama de niveles permite en apenas unos clicks entender la estructura de un sitio en base a sus contenidos. Ahora, y gracias a la gente de Pupunzi implementar un menú desplegable multinivel nunca fue tan simple, basta con descargar el plugin MB.MENU y con apenas unas lineas de código ya tendremos nuestro componente completamente funcional. Captura de pantalla del menú desplegable: Si lo desean pueden probar ustedes mismo el menú desplegable directamente desde la demostración online. Este plugin es altamente completo a la hora de personalizar, un ejemplo de utilización seria el siguiente: Un detalle importante y que ahorra bastante código es la utilización de plantillas, algo que vamos a agradecer mucho en cuanto nuestros menús comiencen a extenderse en opciones. Descarga: MB.MENU Pablo
CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. Push Your Web Design Into The Future With CSS3 – An introduction to some of the new features in the CSS3 specification. CSS3 Selectors Explained – An overview of some of CSS3 selectors, including selector syntax.
Andrea Joseph (Weekly Story Theme: Romance) There is no other love like an illustrator’s hand and its pen. These two spend hours together everyday, inseparable, and when they are not together, the hand years for the cool grip of its beautiful slender pen. Andrea Joseph hand knows this feeling well, and his hand and its pen have been committed to each other for years now, and now on Creative Tempest they renew their vows.
Basic Ready-to-Use CSS Styles This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS. Block-level elements You are creating an image gallery and want to give some subtle styles to the pictures? The Markup For this whole section, I took an a division with the class “block-level” and added the additional classes to it. The Basic CSS Shadows Links
11 CSS Learning Tools and Resources The industry of late has been overrun with articles, tutorials, and tools focused on Sass, even here on SitePoint we’ve been publishing more Sass content than ever before. But we haven’t forgotten about our roots: CSS. For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I thought I’d put together a list of CSS learning resources that I’ve come across in recent months. Enjoy! 1. Interactive slides that explore CSS 3D Transforms. 2. A nicely designed little game to help you learn CSS selectors. 3. A simple visualization of selectors in CSS. 4. A frontend coding quiz and it’s not easy. 5. A 6-chapter tutorial on the basics of CSS, with more chapters to come. 6. A CodePen-like playground for learning CSS. 7. Harry Roberts has updated his CSS Guidelines. 8. Chrome Dev Relations guy Paul Lewis has created a quick reference for those interested in what is triggered on a page when a given CSS property changes. 9. 10. 11. Know Any Others?