Skip to main content

Home/ CSS Evangelist/ Group items tagged css3

Rss Feed Group items tagged

Zulkarnain K.

CSS Arrow Please - 10 views

  •  
    There are web-based generators for almost everything; stripes, buttons, forms, loader icons, etc.

    CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows.

    This CSS trick is great for using in tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.
Zulkarnain K.

CSS 3D transforms - 6 views

  •  
    A very short introduction - by Bartek Szopka
yc c

CSSPrefixer - 6 views

  •  
    adapts code for all browsers (adds -webkit, -moz...)
yc c

CSS Test | CSS Class - 7 views

shared by yc c on 13 Dec 11 - No Cached
  •  
    These are my CSS test pages. In these pages you will find a growing collection of test and demonstrations of browser support of CSS standards.
yc c

Animate.css - a bunch of plug-and-play CSS animations - 0 views

  •  
    To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.
Zulkarnain K.

Prefixr - 8 views

  •  
    Cross-Browser CSS in Seconds.
yc c

BonBon Buttons - Sweet CSS3 buttons - 10 views

  •  
    There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.
yc c

CSS3 Playground by Mike Plate - 7 views

shared by yc c on 11 Aug 10 - Cached
  •  
    The CSS3 Playground is a web application for experimenting with some new css3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing/limiting the experience on browsers that does not support them (=Internet Explorer 8.0 and older). But there are also styles that may need better replacements on Internet Explorer such as rotation, and I hope I will have the time to add more in the future.
yc c

welcome // CSS3 Playground - 8 views

shared by yc c on 11 Aug 10 - Cached
pep sharada liked it
  •  
    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.
Vernon Fowler

CSS3 Generator - 12 views

  • -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.
  •  
     All the effects are fully customizable and you can choose from all the popular CSS3 properties.
yc c

CSS3 Border Image Experiments : Nora Brown Design - 6 views

  •  
    from article: Understanding border-image http://css-tricks.com/understanding-border-image/
yc c

Understanding border-image | CSS-Tricks - 6 views

  • Strangely, the percentages require the “%”, while pixels should be listed without the “px”:
  •  
    The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.
yc c

Pure CSS Twitter Fail Whale - Subcide - 5 views

  •  
    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;} 
yc c

magnifyma - Project Hosting on Google Code - 1 views

  •  
    Magnifying glass experiment using CSS3. Only works in Google Chrome at the moment and has very limited usage capability. But the initial idea is there and hope to extend with more features later on.
yc c

Web Browser CSS Support - 7 views

  •  
    This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.
1 - 20 of 45 Next › Last »
Showing 20 items per page