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.

transform-function Syntax The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D. Matrix transformation matrix() Describes a homogeneous 2D transformation matrix. matrix3d() Describes a 3D transformation as a 4×4 homogeneous matrix. Perspective perspective() Sets the distance between the user and the z=0 plane. Rotation rotate() Rotates an element around a fixed point on the 2D plane. rotate3d() Rotates an element around a fixed axis in 3D space. rotateX() Rotates an element around the horizontal axis. rotateY() Rotates an element around the vertical axis. rotateZ() Rotates an element around the z-axis. Scaling (resizing) scale() Scales an element up or down on the 2D plane. scale3d() Scales an element up or down in 3D space. scaleX() Scales an element up or down horizontally. scaleY() Scales an element up or down vertically. scaleZ() Scales an element up or down along the z-axis. Skewing (distortion) skew() skewX() skewY()

Home How to create slick effects with CSS3 box-shadow Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips

CSS Style Guides As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → Configure your editor to "show invisibles". ThinkUp

jQuery: The Write Less, Do More, JavaScript Library CSS 3D Image Flip Gallery With Dynamic Shadows My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3D works, such as the Origami UI: we live in a world of increasingly diversified screens, with smaller sizes rapidly becoming the norm. That demands a reconsideration of space: rather than placing captions below photographs, we might want to place them behind the image, to be revealed with a mouseover or tap action. Creating The Basic Gallery The markup for the image flip gallery couldn’t be much simpler: <figcaption>Yacht</figcaption> <figcaption>Bee</figcaption> <figcaption>Queens-town</figcaption> Note the outer div for each figure, which will be used to create a 3D context for the gallery content. To gain the 3D effect shown in the example, we need to do three things: The Initial CSS div.flip-3d { perspective: 1200px; width: 30%; float: left;

9 jQuery Scripts to Enhance Your Website Time for a roundup for all the jQuery plugins that have been on the wild for a few weeks. There are getting more and more jQuery plugins coming out just to meet your special needs. In this post, I particularly like Sausage contextual pagination, I think it's a brilliant ideas! Here you go, pretty sure some of them will be really useful. TN3 Gallery TN3 Gallery is a full fledged HTML based customizable jQuery slideshow with slideshow, transitions and multiple album options. Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.

Responsive Images Done Right: A Guide To <picture> And srcset jQuery | Tutorialzine | Page 6 Creating a PHP and CSS3 PoweredAbout Page By Martin Angelov | Here we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. Read more Making a Beautiful HTML5Portfolio In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin.

Responsive Images: If you're just changing resolutions, use srcset. | CSS-Tricks By Chris Coyier On September 30, 2014 responsive images If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>. Gaze upon this easy syntax: It's not just the syntax that is easy, it does a better job than <picture> with <source>s with explicit media attributes (we'll cover why in a moment). Plus it has the opportunity to be much better in the future with browser settings and browser improvements. I've screencasted about this before, but it clicked better watching Mat Marquis's talk at An Event Apart Austin and with Jason Grigsby's post. #With srcset, the browser does the work of figuring out which image is best In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser goes: Now another browser visits the site.

Colortip – a jQuery Tooltip Plugin Martin Angelov In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. Step 1 – XHTML The plugin we are about to write today, works by converting the title of an element on the page to a structure of three spans, which form a tooltip, displayed on hover. <a href=" class="blue" title="Go to Tutorialzine">Tutorialzine</a> jQuery will convert it to the markup you can see below. <a class="blue colorTipContainer" href=" Go to Tutorialzine </a> Notice that the first block of code above specifies a “blue” class name. Step 2 – CSS colortip-1.0-jquery.css – Part 1 Making a triangular shape with a div

19 tips y trucos para CSS El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños. Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web. Cambiar el color de la selección de texto Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS: Demostración Letra capital Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás: Demostración Enlaces que gradualmente se desvanecen Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca: Demostración Rotar una imagen Este Código CSS te permite rotar una imagen los grados que gustes: Demostración Mover 1px el enlace al hacer clic Demostración CSS3 Media Queries [/css] [css]