Skip to main content

Home/ CSS Evangelist/ Group items tagged css tricks

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Zulkarnain K.

CSS Arrow Please - 10 views

cssarrowplease.com

css3 css generator arrow tools webdev webdesign

shared by Zulkarnain K. on 17 Apr 12 - No Cached
Vernon Fowler liked it
  • Zulkarnain K. on 17 Apr 12
     
    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.
Gary Edwards

The CSS Box Model | Chris Coyier CSS Tricks - 0 views

css-tricks.com/the-css-box-model

css tutorial

shared by Gary Edwards on 05 Jun 09 - Cached
  • Gary Edwards on 05 Jun 09
     
    Chris Coyier discusses the basics of the CSS Box Model: "every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We've talked about the positioning of these boxes a bit, and about their behavior." "What we haven't talked about much is the box itself. How is the size of the box calculated exactly? "
Gary Edwards

Typogridphy - A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS W... - 2 views

csswizardry.com/typogridphy

css layout-grid

shared by Gary Edwards on 31 May 08 - Cached
  • Grids & Typography Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.
  • Gary Edwards on 31 May 08
     
    Very nice. Great looking lists! Found this link at CSS-Tricks
Frederik Van Zande

Hackszine.com: Easiest cross-browser CSS min-height - 0 views

www.hackszine.com/...st_crossbrowser_css_minhe.html

best practice cross browser css hack min-height

shared by Frederik Van Zande on 27 Mar 08 - Cached
  • Frederik Van Zande on 27 Mar 08
     
    Enforcing a minimum height for block elements in HTML is one of those few CSS tricks that you can't live without. There are still enough folks using IE6, unfortunately, and it doesn't support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser-conditional style sheets to get the desired effect.
Hussain M Elius

CSS Decorative Gallery - 0 views

www.webdesignerwall.com/...css-decorative-gallery

css webdesign frame

shared by Hussain M Elius on 28 May 08 - Cached
  • Frederik Van Zande on 28 May 08
     
    Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible - see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).
  • Hussain M Elius on 10 Nov 08
     
    Trick to show how to decorate your images and photo galleries without editing the source images.
my mashable

Disable YouTube's related videos With a Simple Hack Code - 0 views

www.bloggersbase.com/...videos-with-a-simple-hack-code

YouTube tricks Hacks related videos XHTML

shared by my mashable on 20 Apr 09 - Cached
  • my mashable on 20 Apr 09
     
    Disable YouTube's related videos With a Simple Hack Code - YouTube added the feature "related videos" wayback in 2007. Iam sure every YouTube user come across with this feature. Once the video completes playing, will displays a list of related videos..." />
Vernon Fowler

CSS Sprites with Inline Images | CSS-Tricks - 0 views

css-tricks.com/css-sprites-with-inline-images

css sprites inline images webdesign NED12

shared by Vernon Fowler on 19 Nov 12 - No Cached
  • The image is "content" while an empty div is not.
  • If you want to keep your image as part of the regular flow of the document the best you can, you can always wrap the image in a div with relative positioning
  • Vernon Fowler on 19 Nov 12
     
    "The "sprite" is the single, combined graphic. We can use this same theory, only instead of using background-image to show the graphic, we can use an image right in the HTML itself (inline image)."
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

CSS3 Border Image Experiments : Nora Brown Design - 6 views

www.norabrowndesign.com/...border-image-anim.html

css3 border image interactive tool online demo explication

shared by yc c on 23 Jul 10 - Cached
  • yc c on 23 Jul 10
     
    from article: Understanding border-image http://css-tricks.com/understanding-border-image/
yc c

Understanding border-image | CSS-Tricks - 6 views

css-tricks.com/understanding-border-image

border explication CSS3 webdev article

shared by yc c on 23 Jul 10 - Cached
  • Strangely, the percentages require the “%”, while pixels should be listed without the “px”:
  • yc c on 23 Jul 10
     
    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.
chris eb

Hacked Off with CSS? - Web-Design - 0 views

www.websites-design.info/31645.php

web promotion webdesign

shared by chris eb on 18 Jun 08 - Cached
  • chris eb on 18 Jun 08
     
    For those not familiar with CSS Hacks, they are ways of using styles/classes that only apply to particular browsers. They are used to overcome the display problems mentioned previously by exploiting CSS structure and code. Most involve simple punctuation tricks to fool the problematic browser into accepting a different style to the browsers that display correctly.
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
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

The Skinny on CSS Attribute Selectors | CSS-Tricks - 0 views

css-tricks.com/attribute-selectors

css selectors attribute selector attributes webdesign regex

shared by Vernon Fowler on 13 Aug 13 - No Cached
  • Vital to note is that you can use multiple attribute selectors in the same selector, which requires all of them to match for the selector itself to match.
  • This is where it starts getting more interesting. The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit. For example, "*=" means "match the following value anywhere in the attribute value."
1 - 20 of 71 Next › Last »
Showing 20▼ items per page