Here are some creative ways to style unordered ul, ordered ol or definition dl lists…
Articles in the ‘Tutorials’ Category
-
5 CSS tricks with lists
Posted: 3 years ago in Tutorials
Read More: 5 CSS tricks with lists
-
Sticky Fixed SideNav Layout with CSS
Posted: 3 years ago in Tutorials
Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site…
Read More: Sticky Fixed SideNav Layout with CSS
-
The 5-Minute CSS Mobile Makeover
Posted: 3 years ago in Tutorials
More people are surfing the Web via mobile device than ever before. It’s just so convenient to have that mobile access to anything you need. Sadly, most websites have not yet considered their mobile visitors, who probably move on to the next site before trying to make sense of a jumbled mess. Those of you who surf the Mobile Web know exactly what I’m talking about here: sites that “get it” are a joy to visit, but those that don’t are a total pain. What’s to get? Well, for one, if you do nothing else for your mobile visitors, take five minutes and implement a basic stylesheet to make your site readable via mobile device. This tutorial will show you how to retain visitors and reduce bounce rate with a super-easy 5-minute mobile makeover…
Read More: The 5-Minute CSS Mobile Makeover
-
Cross-browser drop shadows using pure CSS
Posted: 3 years ago in Tutorials
There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. Do websites need to look exactly the same in every browser?
One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly. All of this begins to degrade page performance, when really the drop shadow is merely a secondary design flourish. CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…
Read More: Cross-browser drop shadows using pure CSS
-
CSS Opacity That Doesn’t Affect Child Elements
Posted: 3 years ago in Tutorials
This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.
-
Animated Navigation using jQuery and CSS
Posted: 3 years ago in Tutorials
How to create an animated navigation menu using jQuery & CSS. Fancy but a very simple technique! The good thing about this technique is that it degrades gracefully and is still accessible even if javascript is turned off…
Read More: Animated Navigation using jQuery and CSS
-
Date Display Technique with Sprites
Posted: 3 years ago in Tutorials
A great tutorial explaining how you can use a single image sprite and some clever CSS to replace HTML date fields with fancy images…
Read More: Date Display Technique with Sprites
-
Reinventing a Drop Down with CSS and jQuery
Posted: 3 years ago in Tutorials
The standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can only contain simple text. This tutorial shows how to replace a dropdown with a custom control using CSS and jQuery…
Read More: Reinventing a Drop Down with CSS and jQuery
-
Creatively Display Client Testimonials Using CSS
Posted: 3 years ago in Tutorials
Display your client testimonials in a creative way, something a little more interesting than just a paragraph of text with their name. Display the testimonial copy within large quotes, and then a picture of the client below the copy. In effect, there are 3 columns, two thin sides with the quotes in them, and the center column with the testimonial copy…
-
Display Text Blocks Over Image
Posted: 3 years ago in Tutorials
Read More: Display Text Blocks Over Image