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
: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.
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.
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
Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design.
The website from Apple isn't less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly.
Today, we're trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion. Make sure you check out the demo (or visit Apple.com) to see this awesome effect work.
This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.
As you can see, the demo is located on another server. The reason for this is, that every time a user presses on his keyboard, a call is made to the MySQL database. When loads of users do loads of calls (at the same time), this could result in slowing down the database. The answer for this would that the results should be cached - Something that isn't implemented right now.
Safari, Chrome and Opera are currently the only webbrowsers that support the drop shadow effect around the the search results. Other browsers will simply display the results without the drop shadow.
This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.
Tags: apple.com search suggestion mysql php jquery ajax
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.
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.
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
Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.
Placing them on simple polaroids on a webpage simply didn't do it for me. I wanted to drag them around, rotate them and still have a fun time. That's were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all modern browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the
-webkit- prefix. Mozillas Firefox 3.1 is getting these properties too (with the
-moz- prefix). So, for now, this is just for fun - Other browsers will display the polaroids, but won't have the neat shadow while dragging and rotating while placing them down.
With that said, check out how you can re-create this effect and learn some more about CSS3 and jQuery. Check out one of my older articles if you're searching for an image gallery that isn't using CSS3.
Tags: polaroid photo viewer css3 jquery tutorial webdevelopment
Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.
The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.
OK, maybe not fully the "feeling" (look and feel) from the iPhone, since I can't make any webbrowser react to placing your finger on the screen, but your mouse will do the trick.
- XHTML and CSS valid.
- "Top indicator" changes character while scrolling (Just like the iPhone).
- Including "Search" on the right (Just like the iPhone).
- Pretty sleek interface, including see-through elements (Just like the iPhone).
- Combined with the unlock and springboard screen, it looks like the real deal.
- Tested and working on Firefox 3, Internet Explorer 7 (With fixes) and Safari 3.
- The "top indicator" doesn't always show the correct character, especially when using the search.
- The "top indicator" is placed on top of the scrollbar of the browser.
- Works crappy on an actual iPhone.
- Only works correct when browser doesn't scroll. For people with a small screen resolution, here's a smaller demo (I just changed the CSS and images to 50% of the original size).
Other than those minor issues, it works as expected. Make sure you check it out!
Tags: iphone mac screen jquery xhtml css
Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the iPhone Springboard in xHTML, CSS and jQuery.
Chris Coyier from CSS-Tricks allowed me to place the article over at his website (Thanks Chris!). If you want to know how I created the iPhone Springboard, make sure you read the article on CSS-Tricks.
I'm planning to make some more of these "iPhone style" webpages, so subscribe to the feed if you want to keep updated.
Tags: iphone mac springboard jquery xhtml css
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 49 - 54 of 104|