Sergio Camalich displays a nice tutorial on how you can have your own site having page transitions effect. The technique he used here are css transitions and :target property. Markup. HTML <!- Home -> <div id=”home” class=”content”> <h2>Home</h2> <p>Some content</p> <!- … -> </div> <!- /Home -> <!- Portfolio -> <div id=”portfolio” class=”panel”> <div class=”content”> [...]
Chris Coyier shares a tutorial that creates a bubble point tooltips with CSS3 and jQuery. Note that its demo will not work on Opera. To start with, here’s the HTML: <a href=”#” title=”Hi, I’m a tooltip thingy.”>link</a> Givje the link a title attribute. jQuery: $(“article a[title]“).tooltips(); The plugin will do the following: loop through each [...]
Here’s another cool navigation menu that I came across. Created by the savvy web developers at Script-tutorials, the LavaLamp menu is a navigation menu that is made with pure CSS3. Below are the following codes. HTML Index.html <ul id=”nav”> <li><a href=”http://www.script-tutorials.com/”>Home</a></li> <li><a href=”#”>Menu 1</a> <ul> <li><a href=”#”>Submenu 1</a></li> <li><a href=”#”>Submenu 2</a></li> <li><a href=”#”>Submenu 3</a></li> <li><a [...]
Chris Spooner shares a nice tutorial on how you can create a vibrant digital poster design with CSS3. His Circlicious design is made purely of HTML and CSS. Take note that this is only suited to modern browsers of Firefox, Safari and Chrome. HTML <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Circlicious CSS Poster</title> <link [...]
Here’s a pretty neat interface design from WebDevelop+ which I think some of you might want to adapt to your website. It’s a collapsible drag and drop panel that allows your users to control how they want to see the information on your site. Check out the DEMO. If you think that this type of [...]
I’d like to share with you this pretty neat image scrolling effect created by Chris Violette using only the wonderful capabilities of CSS. It’s a nice slider to have as a header. It’s lightweight, meaning that it doesn’t slow down your site as much as using a complicated jQuery-based image slider. The effect was based [...]
Eric Hoffman demonstrates how you can create a vertical navigation using only CSS3 and without any images. The idea of this cool navigation is when you hover over the circle icon, it expands, displaying some descriptions about the menu. Be reminded though that it has been tested using Webkit browsers such as Safari and Chrome [...]
Today’s featured plugin comes from the guys over at monkeecreate and it is called SimpleWeather, a jQuery plugin that creates a widget that displays the current weather in the specified locale. The data it displays is pulled from the public Yahoo! Weather feed via the YQL API, which means that it can only recognize US [...]
Kendra Schaefer and Ken Breeden’s great tutorial shows you how to create a pretty-looking bar graph/chart that’s not only animated but three-dimensional as well! The difficulty rating of the tutorial is rated at Intermediate level since it requires some understanding of jQuery, HTML, and CSS but it is nonetheless very easy to follow. Click on [...]
It’s impressive how some single-page websites are designed, particularly in the way they transition from one section of the page to the next. Most of these effects are done with the use JavaScript and Sergio Camalich shows us that we can accomplish pretty much the same feat with his CSS3 tutorial. Click on the image [...]
0
511
