Skip to main content

Home/ CSS Evangelist/ Group items tagged webkit

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
yc c

Pure CSS Twitter Fail Whale - Subcide - 5 views

www.subcide.com/...pure-css-twitter-fail-whale

CSS3 experiment animation

shared by yc c on 14 Jun 10 - Cached
  • yc c on 14 Jun 10
     
    Developers continue to do crazy things to show us what can be done with CSS3. The latest is a fully animated Twitter fail whale by Steve Dennis: The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I'd been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect. Also I think the animation only adds to his (or her?) charm. How was this made? The short answer is very painfully, by hand, using trial and error. Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them. I hope someone else gets a bit of enjoyment out of my wasted Sunday. It was a fun experiment that I don't plan on repeating any time soon. Take a look at the source to see the mass of code such as: PLAIN TEXTCSS:@-webkit-keyframes flutter1 {  0%   { -webkit-transform:rotate(0deg) }  50%  { -webkit-transform:rotate(-25deg) }  100% { -webkit-transform:rotate(0deg) }}.right .wing {  background: transparent !important;  z-index: 22 !important;  width: 15px;  height: 18px;  bottom: 4px;  left: 8px;  -webkit-animation: 'flutter1' 0.1s linear;  -webkit-animation-iteration-count: infinite;} 
Frederik Van Zande

CSS Transitions via jQuery Animations | Weston Ruter - 1 views

weston.ruter.net/...jquery-css-transitions

jquery javascript animation css css transitions webkit

shared by Frederik Van Zande on 15 Jan 09 - Cached
  • Frederik Van Zande on 15 Jan 09
     
    The WebKit team has been developing some cutting-edge proposals to extend CSS with the ability to do declarative animations and other effects. This ability is key to maintaining the three-fold separation of HTML content, CSS presentation, and JavaScript behavior. Animation effects on the Web today are accomplished with JavaScript code which repeatedly changes an element's style at a certain interval in order to create an animated effect. This practice, however, violates the separation between presentation and behavior because the animation behaviors are directly changing the document's presentation (i.e. modifying the style property). Ideally, all of the animation triggers and presentation states would be declared in CSS. And this is exactly what the WebKit team has proposed in its CSS Transitions specification.
webExplorations

Ultimate CSS Gradient Generator - ColorZilla.com - 0 views

www.colorzilla.com/gradient-editor

css3

shared by webExplorations on 02 Aug 11 - No Cached
  • webExplorations on 02 Aug 11
     
    "background: -moz-linear-gradient(top, rgba(97,103,150,0.35) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,103,150,0.35)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59616796', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(97,103,150,0.35) 0%,rgba(125,185,232,0) 100%); /* W3C */"
Gary Edwards

CSS Tutorials @ SitePoint - 0 views

www.sitepoint.com/css

CSS webkit air flex tutorials

shared by Gary Edwards on 31 Oct 08 - Cached
  • Gary Edwards on 31 Oct 08
     
    List of CSS articles and tutorials at SitePoint. Includes Adobe AiR and WebKit implementations.
Vernon Fowler

Box Sizing | CSS-Tricks - 0 views

css-tricks.com/box-sizing

css box-sizing webdesign css3

shared by Vernon Fowler on 21 Aug 12 - No Cached
  • The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box.
  • -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */
yc c

CSSPrefixer - 6 views

cssprefixer.appspot.com

CSS tool online generator browser CSS3

shared by yc c on 25 Jan 12 - No Cached
  • yc c on 25 Jan 12
     
    adapts code for all browsers (adds -webkit, -moz...)
Vernon Fowler

Box Sizing | CSS-Tricks - 0 views

css-tricks.com/box-sizing

box sizing layout boxmodel CSS webdesign

shared by Vernon Fowler on 26 Jan 12 - No Cached
  • -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */
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.
yc c

welcome // CSS3 Playground - 8 views

css3playground.com

css3 playground experiment

shared by yc c on 11 Aug 10 - Cached
  • yc c on 11 Aug 10
     
    This is a demo site for CSS3. For most stuff you need Safari 4+, Chrome, Firefox 4 beta or Opera 10.5x to make these demos work. For 3D stuff, you need Safari 5 or the WebKit Nightly build.
Charles Gnilka

10 Image Free Sexy CSS Menu and How to Create One | Desizn Tech - 0 views

desizntech.info/...css-menu-and-how-to-create-one

css.navigation

shared by Charles Gnilka on 21 May 09 - Cached
  • Charles Gnilka on 21 May 09
     
    It has been while since we did any CSS menu post here. Who said you can't make sexy, cool looking menu with CSS ? Today we bring you 10 Free sexy CSS menu and tutorial on how to create one. As usual they are free for personal use. Most the of menus are created using using  CSS and CSS3 propety-webkit-border-radius and -moz-border-radius.
yc c

Zachary Johnson in Cyberspace - zachstronaut - 2 views

www.zachstronaut.com

jquery rotation css animation

shared by yc c on 17 Dec 10 - Cached
  • yc c on 17 Dec 10
     
    I have created a monkey patch for jQuery (tested through 1.4.3) which enables you to independently set and/or animate both the scale and rotation of any HTML content with jQuery. This code uses the scale() and rotate() CSS transformations that are only supported by Webkit, Safari, Chrome, Firefox 3.5+, IE9 (Platform Preview 7+), and some versions of Opera at this time.
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.
Vernon Fowler

CSS3 Generator - 12 views

css3generator.com

css3 webdesign generator css tools web design

shared by Vernon Fowler on 24 Jul 10 - Cached
  • -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  • If you set it to border-box, the padding and border will render inside the box.
  • yc c on 24 Jul 10
     
     All the effects are fully customizable and you can choose from all the popular CSS3 properties.
Gary Edwards

HTMLayout: fast, lightweight and embeddable HTML/CSS renderer and layout manager component - 0 views

www.terrainformatica.com/...main.whtm

HTML-CSS CSS3 florian wiki-WORD webkit

shared by Gary Edwards on 11 Nov 08 - Cached
  • Gary Edwards on 11 Nov 08
     
    Terra Informatica services include: HTMLayout, WYSIWYG HTML Word Processor, and TIScript compiler-vm.
Jason Bao

New CSS properties in Safari | 456 Berea Street - 0 views

www.456bereastreet.com/...new_css_properties_in_safari

group

shared by Jason Bao on 23 Feb 07 - Cached
  • First out is text-stroke, a new (and non-standard, so not for real-world use) CSS property that can be used to control the fill and stroke colours as well as the stroke width of text. A description and a couple of examples are available in Introducing Text-Stroke.
1 - 16 of 16
Showing 20▼ items per page