Skip to main content

Home/ CSS Evangelist/ Group items tagged pseudo

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
yc c

The Mysterious Pseudo Class in CSS - 2 views

webtint.net/...mysterious-pseudo-class-in-css

css pseudo-class browser compability

shared by yc c on 30 Jan 10 - Cached
  • yc c on 30 Jan 10
     
    css pseudo-class browser compability chart
Vernon Fowler

Learning To Use The :before And :after Pseudo-Elements In CSS | Smashing Coding - 0 views

coding.smashingmagazine.com/...d-after-pseudo-elements-in-css

css css3 pseudo selectors before after webdesign

shared by Vernon Fowler on 02 Jan 14 - No Cached
  • The content that’s injected will be child content in relation to the targeted element
  • First, you can include a URL that points to an image, just as you would do when including a background image in the CSS
Vernon Fowler

Meet the Pseudo Class Selectors | CSS-Tricks - 0 views

css-tricks.com/pseudo-class-selectors

webdesign css web design selectors class

shared by Vernon Fowler on 18 Nov 12 - No Cached
  • You probably wouldn't want to drop cap every single paragraph on the page, but just the first one, so, p:first-child:first-letter { }
yc c

Blog | Graphicpeel - iOS Icons Made in Pure CSS - 5 views

blog.graphicpeel.com/...ios-icons-made-in-pure-css

CSS webdev icons

shared by yc c on 28 Jun 10 - Cached
  • yc c on 28 Jun 10
     
    The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv's tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples. In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes. The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon. To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.
Frederik Van Zande

Agile Ajax: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (p... - 0 views

blogs.pathf.com/...hacking-transpa.html

behaviors css hack ie_6 javascript jquery png transparency trick

shared by Frederik Van Zande on 11 Apr 08 - Cached
  • Frederik Van Zande on 11 Apr 08
     
    esterday's post showed how to hack the :first-child pseudo-class into IE6 with jQuery and CSS. Continuing with that theme, today and tomorrow we'll show how to enable transparent PNG support in IE6
Alexis Sgavel

Custom drop downs with CSS3 | Lea Verou - 0 views

leaverou.me/...om-select-drop-downs-with-css3

select drop design tools

shared by Alexis Sgavel on 18 Mar 11 - No Cached
  • Alexis Sgavel on 18 Mar 11
     
    The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go "through" an element and target whatever is "underneath" that element instead. This also applies to other "hit testing" behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint().
Alexis Sgavel

How to Create CSS3 Ribbons Without Images » JavaScript & CSS » SitePoint Blogs - 0 views

blogs.sitepoint.com/pure-css3-ribbons

Ribbon ribbons reference design

shared by Alexis Sgavel on 29 Mar 11 - No Cached
  • Alexis Sgavel on 29 Mar 11
     
    I n my last post, Pure CSS3 Speech Bubbles Without Images, we saw how the :before and :after pseudo-elements could be used to create different effects. In this post we'll use similar techniques to create a variety of ribbons.
Alexis Sgavel

How to Create CSS3 Paper Curls Without Images » SitePoint - 0 views

blogs.sitepoint.com/pure-css3-paper-curl

paper shadows css3

shared by Alexis Sgavel on 27 Apr 11 - No Cached
  • Alexis Sgavel on 27 Apr 11
     
    I n my previous posts, we discovered how to create speech bubbles and ribbons without additional HTML elements or images. They were achieved using CSS3 effects applied to the :before and :after pseudo-elements. In this post, we'll use a similar technique to create a paper curl effect.
Vernon Fowler

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

coding.smashingmagazine.com/...to-less-and-comparison-to-sass

less sass css comparison webdesign css3 preprocessor

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
  • With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
  • Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
  • ...8 more annotations...
  • .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
  • The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
  • Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
  • With LESS, you can nest ids, classes and elements as you go.
  • You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
  • Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
  • Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
  • Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
webExplorations

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 - 0 views

selectivizr.com

css3 html5

shared by webExplorations on 02 Aug 11 - Cached
  • webExplorations on 02 Aug 11
     
    Make your CSS3 web pages backward compatible with IE 6=8
mikhail-miguel

CSS Pseudo-elements - 0 views

www.w3schools.com/...css_pseudo_elements.asp

css dev

shared by mikhail-miguel on 05 Mar 18 - Cached
  • mikhail-miguel on 05 Mar 18
     
    The CSS Compressor makes major changes to stylesheets and is still in developement, so it may not work correctly.
1 - 13 of 13
Showing 20▼ items per page