Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. Take a look at the demo For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. I usually markup tags with unordered list. <ul class="tags"><li><a href="#">tag</a></li><li><a href="#">tag name</a></li></ul> I will add :before and :after pseudo elements and style them to achieve the styling I wanted I am placing the tags list at the bottom of the post element with adjusting ULs absolute position Height (and line-height) of the list item LI and anchor A is set. Next to style is the anchor element. To achieve the pointed edge we are adding a :before pseudo-element. The last element to add is the :after pseudo-element. We’re also adding a :hover state for the anchor: That is it! Enjoyed the article?
Hues Hub: HTML Color Codes in Hexadecimal at intervals of hue, saturation, and light; Hue each 6 degrees
Welcome to the Hues Hub (Nameless Hexadecimal Color Codes for HTML) This chart helps you pick from among 4,800 hexadecimal color codes in charts with six degrees of hue separation. Click on the swatch set closest to the hue that you want, and you'll see a table of swatch charts with hex codes. You can use a quick reference table to see the other charts and information available. To make your own color chart based on hue, use the Hue Stepper. These pages are part of The Color Spot at HTML Station of december.com.
Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher – Blog & Ephemera
Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning. The pseudo-elements contain no true content and are absolutely positioned. What effects can be achieved? Most structural elements will contain child elements. Example code: multiple background images Each pseudo-element then has a repeated background-image set.
A simple tutorial
« Que peut faire PHP ? Le nécessaire » Edit Report a Bug Une introduction à PHP ¶ Sommaire ¶ Dans cette section, nous voulons illustrer les principes de base de PHP dans une courte introduction. Les pages web qui exploitent PHP sont traitées comme des pages HTML standards, et vous pouvez les créer, éditer et effacer tout comme vous le faites normalement avec des pages HTML classiques. add a note User Contributed Notes There are no user contributed notes for this page.
CSS3 PIE: CSS3 decorations for IE
Understanding CSS3 Transitions
It was 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate. Article Continues Below One triumphant night, I pumped my fist in sweet victory. I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse. We’ve come a long way over the past decade in regard to interaction and visual experience on the web. My first JavaScript rollover back in 1997 took me several nights of head scratching, many lines of code that seemed alien to me at the time, and multiple images. We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. Tail wagging the dog#section2 Let’s take a look at how transitions work, shall we?
CSS Positioning 101
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect. Example D shows our new markup.
Rounded corners and shadowed boxes
Rounded corners and shadowed boxes This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos. CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up. Of course, rounded borders and shadows will be much simpler with CSS3. And to add a blurry drop shadow half an em below and to the right of the paragraph, just one line would be enough: (You can try here and here if it works already.) Five images on one element The main trick is to use generated content (':before' and ':after') to put four extra images on an element. We create five PNG images and put them in the four corners and against the right edge of the element. top left corner: top edge and top right corner: middle part and right edge: bottom left corner: bottom edge and bottom right corner: And here are the CSS rules to position them:
