Skip to main content

Home/ CSS Evangelist/ Group items tagged properties

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
yc c

#eCSStender.org { content: "Homepage"; } - 1 views

ecsstender.org

css extension

shared by yc c on 05 Dec 09 - Cached
  • yc c on 05 Dec 09
     
    Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work... even in IE6. To see what you can use today, browse the extensions. To use the extensions, download eCSStender and include it and your extensions in your site.
Vernon Fowler

Ten Reasons You Should Be Using a CSS Preprocessor | Urban Insight Blog - 0 views

blog.urbaninsight.com/...ould-be-using-css-preprocessor

css preprocessor sass webdesign web design workflow tools less

shared by Vernon Fowler on 10 Oct 12 - No Cached
  • 10 reasons you should consider using a CSS preprocessor
  • you can start using things like variables, mixins, and functions. It will allow you to start reusing properties and patterns over and over, after defining them just once
  • nothing is repeated
  • ...2 more annotations...
  • Both Less and Sass support nested definitions.
  • if you can write CSS, you already know how to write valid .less
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+ */
Vernon Fowler

No More Need For Some CSS3 Vendor Prefixes | MightyMeta - 0 views

www.mightymeta.co.uk/...-for-some-css3-vendor-prefixes

css css3 vendor webdesign

shared by Vernon Fowler on 06 Jan 12 - No Cached
  • Safari (5% of global share) still requires a prefix for box-shadow
  • Hopefully some of the other more exciting CSS3 properties such as transform will follow suit soon.
Vernon Fowler

Working With LESS and the Chrome DevTools - 2 views

dev.tutsplus.com/...the-chrome-devtools--net-36636

css webdesign tools browser less debug

shared by Vernon Fowler on 28 Jan 14 - No Cached
  • While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
  • Vernon Fowler on 28 Jan 14
     
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. | Difficulty: Beginner; Length: Quick; Tags: Tools & Tips, Tutorials, Web Dev
Vernon Fowler

Prevent Long URL's From Breaking Out of Container | CSS-Tricks - 0 views

css-tricks.com/...from-breaking-out-of-container

typography webdesign css links

shared by Vernon Fowler on 19 Feb 14 - No Cached
  • a width
    • Vernon Fowler
      Vernon Fowler on 19 Feb 14
       
      I didn't need a width. Float:left was enough. Tested in IE10.
  • -ms-word-break: break-all;
    • Vernon Fowler
      Vernon Fowler on 19 Feb 14
       
      Shouldn't need the IE prefixed version as according to http://caniuse.com/#search=word-break that browser has had support all along.
  • float:left
Vernon Fowler

word-break | CSS-Tricks - 0 views

css-tricks.com/...word-break

css webdesign long words fittext text

shared by Vernon Fowler on 20 Mar 14 - No Cached
  • It's often used in places with user generated content so that long strings don't risk breaking layout.
Vernon Fowler

Web Designer Notebook » How to use Modernizr - 0 views

webdesignernotebook.com/...how-to-use-modernizr

html5 css3 javascript library browser modernizr css webdesign

shared by Vernon Fowler on 15 Mar 14 - No Cached
  • Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
  • To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example: ?1<script src="js/modernizr-1.0.min.js"></script> The second step is to include on your html tag a class of “no-js”: ?1<html class="no-js"> Why add this tag? Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this: ?1<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
  • Vernon Fowler on 15 Mar 14
     
    "There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."
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.
yc c

Font Tester - Online Font Comparison Tool - Preview Fonts - Compare Screen Type - 0 views

www.fonttester.com

css font preview tools

shared by yc c on 09 Mar 09 - Cached
  • yc c on 09 Mar 09
     
    Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.
yc c

Resources : CSS : Cultured Code - 0 views

www.culturedcode.com/css

css download interactive tutorial

shared by yc c on 09 Mar 09 - Cached
  • yc c on 09 Mar 09
     
    interactive CSS 2.1 properties reference
yc c

Uni-Form - 0 views

dnevnikeklektika.com/uni-form

css form sniplet standards

shared by yc c on 30 Mar 07 - Cached
  • yc c on 30 Mar 07
     
    An attempt to standardize forms. Nice highlighting effects.
  • yc c on 09 Mar 09
     
    Plug and play style. Download the uni-form.zip (v1.2) and you're pretty much all set! It is encouraged to edit css properties only in the uni-form.css file, so you can easily upgrade to the newer versions as they come along by copying over the old copy the uni-form-generic.css.
Vernon Fowler

A Complete Guide to Flexbox | CSS-Tricks - 0 views

css-tricks.com/...a-guide-to-flexbox

flexbox CSS css3 layout responsive webdesign sass mixin vendor prefix IE10

shared by Vernon Fowler on 22 Mar 14 - No Cached
  • flex-direction
  • flex-wrap
  • space-around: items are evenly distributed in the line with equal space around them
  • ...6 more annotations...
  • justify-content
  • align-items
  • flex-start: cross-start margin edge of the items is placed on the cross-start line
  • stretch (default): stretch to fill the container (still respect min-width/max-width)
  • Note: this property has no effect when the flexbox has only a single line.
  • flex-grow
‹ Previous 21 - 40 of 50 Next ›
Showing 20▼ items per page