» Smart Phones, Web Design, Google or whatever
Posts tagged css
CSS – Order and Unordered Lists
Oct 5th
Unordered Lists
No bullet:
ul.nobullet { list-style-type: none; }
CSS: All Caps
Jun 16th
Need to have all caps and CSS seems the best way to do it? Maybe you don’t want to re-code an entire menu (like me today!).
Use this:
.allcaps {text-transform: uppercase;}
… and there’s no need to re-type a bunch of text links.
MORE INFO
CSS: Using Multiple Classes
Aug 5th
Using multiple CSS classes on an element can be powerful, and a time-saver. Here’s a simple example, let’s say you want to add a class called red to make certain text elements stand out. Try this:
<span class="boldtext red">for sale</a>
In the sample above, the text “for sale” will have the class boldtext and red applied to it. Multiple classes can be really helpful if you start working on a site you didn’t write, and don’t have the time to map out the previous web dude’s CSS fully, or even if you are just in a hurry, or your stylesheet has grown so big over time you want to place it safe.
CSS Shorthand
Jul 31st
Looking around for my last CSS post about cross-browser transparency I ran into a post about 5 Cool CSS Tricks on BrightCherry.co.uk by a dude named Maruf which reminded me of some other cool CSS that I find useful. Here is one of those – CSS Shorthands.
CSS Shorthand
CSS can get quicker and easier to use if you know some of the shorthand properties (more CSS shorthand properties). For example you could code a background image and its placement like this:
CSS Shorthand for Background
.backgrnd {
background-image: url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
}
You could do it that way or you could use shorthand:
.backgrnd {
background: url(images/background.jpg) top center no-repeat;
}
CSS Shorthand for Font
.maxedoutfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
You could do it that way or you could use shorthand:
.maxedoutfont {
font: Arial, Helvetica, sans-serif 12px/14px bold italic small-caps;
}
Note that, as Maruf mentioned in his post, you must specify at least the font-family and font-size. If you do not specify line-height, font-weight, font-style or font-variant then normal (the CSS defaults) will be used/inherited.
Cross browser CSS Transparency
Jul 31st
I had to rip this off of Chris Coyier’s www.css-tricks.com because I want to be able to find it more easily.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Also from the same post, this info defines what the different parts of this code do:
opacity: 0.5: most versions of Firefox, Safari, and Opera
This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.filter:alpha(opacity=50): Internet Explorer
-moz-opacity:0.5: Netscape
You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.-khtml-opacity: 0.5: old versions of Safari (1.x)
This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
NEXT
CSS Shorthand
