Placed in: Home arrow Programming arrow CSS viagra australia
viagra online
viagra sale
cialis online
cialis australia
CSS
Showing links while hovering using CSS

Links (or anchor tags) are really important in webdesign/development. With all default settings (Both in CSS and the webbrowser), a link does look pretty ugly: A blue, underlined text (and purple when you visited that website). I'm sure you've seen these colours before.

Luckily, CSS helps a lot. By changing the color, :hover and :visited you can easily make your links a little bit more fancy. Janko has written an excellent post how you can improve your links even more.

Here's a simple little CSS technique that could be really useful in your next webdesign/webdevelopment process when adding links to a HTML page. Too many links on a page can be really confusing. Some links are just more important than others: They're the one that really need the desired attention. Other links (that are more common, like links to your Twitter page or RSS feed) should not be so "special".

That's exactly what we're going to do today: Hide those unimportant links and unhide (show) them while hovering its parent. We'll achieve this using CSS.

Showing links while hovering using CSS

Achieving this technique isn't really hard and is more like a "small trick". That doesn't mean that it isn't useful: With this small piece of CSS, you can add a lot more rest to your website, since not so many links get loads of attention: Only when hovering the parent tag.

Demo showing links while hovering using CSS   Download showing links while hovering using CSS

Internet Explorer 6 is a real game stopper when it comes to CSS. I'm also giving a neat little jQuery solution to make this nice technique cross-browser compatible.


Tags:  css technique links html jquery tutorial webdevelopment
 
Styling a chat conversation with text balloons

As you can see in my last article (a chat conversation with Janko Javonovic), the article is nicely styled in a real "chat conversation" way. This is achieved by placing the text in text (or speech) balloons, using avatars and making it look pretty fancy.

Like I already said in that article, I wanted to share how you can create such a nicely styled chat conversation with text balloons using CSS3. You can show your interviews or chat conversations online in a pretty way, making it more visually attractive.

Styled chat conversation with CSS3

IMPORTANT NOTE:
Just like the polaroid photo viewer: The text balloons are styled using the CSS3 border-radius property. This works fine on Firefox (using -moz-border-radius) and on Safari/Chrome (using -webkit-border-radius), but on Internet Explorer (not even 8.0) it doesn't. The browser just displays the text baloons as simple blocks.

Demo styled chat conversation with CSS3   Download styled chat conversation with CSS3

Get your CSS editor ready so you'll be able to re-create this cute effect for your site!


Tags:  css3 text balloons speech balloons interview chat conversation
 
A parallax illusion with CSS: The Horse in Motion

Time for some fun with CSS and optical illusions. For those people that are feed subscribers for a while, will know that I really love optical illusions. I already wrote several articles with optical illusions (15 cool word illusions, Illusion of a 3D dragon and more), and now it's time to create one myself with the help of CSS.

One of the optical illusion video's that I saw a while ago, was the example of the book called Magic Moving Images. The video clearly explains how this optical illusion works and I really liked it.

Optical Illusion CSS Parallax

I wanted to recreate the effect of the illusion with the help of parallax and CSS. Chris Coyier wrote an article about Starry Night: Incredible 3D Background Effect with Parallax. This was the foundation of the effect of an optical illusion.

Check out the demo page with can be created by combining those two awesome techniques.


Tags:  css optical illusion horse motion fun
 
AJAX-style image loading using CSS

AJAX let's you show a nice loader when doing a XMLHttpRequest. It's great for the visitor, because it can see that something is loading. Bad thing for the web developer is, is that AJAX is hard to learn. So here's a small little CSS trick for some great user experience, making it look like you made an AJAX loader for images.

You can implement this on a web page with an image/photo gallery or to a page where you have to load big images, like wallpapers. It's very easy to set-up and implement to your site.

AJAX Loader

This technique doesn't work with any form of AJAX. It just emulates the style of loading, giving the visitor and indicator that there is activity going on.


Tags:  CSS webdesign internet programming
 
Top 22 CSS tutorials

Every well-respected webdesigner knows how to use a CSS file. With this you can add markup to your webpage. I created a list of my personal top 22 favorite different subject CSS tutorials. They are listed below and are in random order. Read, learn and implement it on your own website.

Top 22 CSS tutorials

Remember that a website styles with CSS can look otherwise in different browsers. Use this browser CSS rules checker to make sure you make the correct code. Additionally, don't forget to use the CSS Validation Service to have your CSS to the W3 standards. When you're done with your CSS file, use the CSS Superdouche to trim your CSS file down, making it smaller causing it to use less bandwith.


Tags:  CSS top programming webdesign internet tutorial
 
Hiding email addresses from spambots using CSS

Nobody likes to receive spam. There are several ways to avoid your email address found by a spambot. For example you could use HTML character entities, Javascript, CAPTCHA etc. It just makes the address readable for humans and not for spambots. Some of those techniques work better then others, but here's a new way of hiding your mail address. Simply by using CSS

Hiding email addresses from spambots using CSS

Too bad that there's just one big catch when using this technique: It doesn't work on Internet Explorer (IE) (yet). This is because IE doesn't support CSS generated content, something which is implemented in Firefox and other webbrowsers. I'm still sharing this knowledge with you, because I think this is very useful and IE will support generated content later on.


Tags:  hide spam programming CSS email
 
<< Start < Prev 1 2 3 4 5 Next > End >>

Results 19 - 24 of 27
Subscribe

Subscribe to Marcofolio