Blogfreakz - Web Design and Web Development resources » css

SimpleWeather – Display The Weather Using jQuery

Keith@Blogfreakz — Mon, 21 May 2012 02:24:33 +0000

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 zip codes so if you are to set a location outside the US you’ll have to type in the name of the city together with the corresponding country.

Customization of the plugin is easy. The script simply returns the data for you to do as you want, which means that you control the entire HTML and utilize the current CSS classes. Click on the image for the demo and documentation.

Incoming search terms for the article:

CSS Tutorial: CSS Properties CSS Syntax

Marvin@Blogfreakz — Mon, 14 May 2012 00:42:30 +0000

CSS plays an important role in today’s web development so here’s a video tutorial by Ashton Sanders that can be very helpful in your quest for making a good web site.

Click on the image to launch the tutorial.

Incoming search terms for the article:

Create Eye-Catching CSS Buttons With Pseudo-Elements

Keith@Blogfreakz — Thu, 10 May 2012 03:33:37 +0000

Today’s featured CSS tutorial comes from Sergio Camalich who created a very cool set of button designs with the use of CSS pseudo-elements. His tutorial shows you how to create buttons with a twist. It will only involve using just one anchor tag for each button to work (with the help of CSS), because you’ll be creating the other elements with the ::before pseudo-class.

Sergio created five different button styles using this one approach but I’m only going to show you just one of them, which actually happens to be my favorite one. If you like to see the rest of the styles, you can check them out on his dribble page.

The button that we’re going to create will look like this:

Click on the image for the demo.

We’ll keep our HTML markup as short and simple as possible with this:

Click me!

And now for the magic of CSS:

.a_demo_three {

background-color:#3bb3e0;

font-family: 'Open Sans', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

position:relative;

padding:10px 20px;

border-left:solid 1px #2ab7ec;

margin-left:35px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

.a_demo_three:active {

top:3px;

background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

.a_demo_three::before {

content:"·";

width:35px;

max-height:29px;

height:100%;

position:absolute;

display:block;

padding-top:8px;

top:0px;

left:-36px;

font-size:16px;

font-weight:bold;

color:#8fd1ea;

text-shadow:1px 1px 0px #07526e;

border-right:solid 1px #07526e;

background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

.a_demo_three:active::before {

top:-3px;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
 }

Incoming search terms for the article:

Creating an Accordion Image Gallery with Only CSS

Marvin@Blogfreakz — Mon, 07 May 2012 08:56:32 +0000

In creating animated transitions, Javascript has always been implemented but German web designer Heiko Stiegert has made it using only CSS. You can do this by using CSS3 pseudo-class :target and negation pseudo-class :not () properties together with CSS3 Transition Module. Get the DEMO here.

Check out his tutorial on building an accordion image gallery without Javascript by clicking on the image.

Incoming search terms for the article:

Real Shadow: A jQuery Plugin For Creating Realisitc Shadows

Keith@Blogfreakz — Thu, 03 May 2012 02:56:31 +0000

Here’s a pretty neat jQuery plugin created by Indamix that you can use on your website! It’s called Real Shadow, and what it does is it gives an element a shadow that changes its attributes depending on the location of the mouse cursor. The plugin works by manipulating the value of the CSS property box-shadow. The shadow’s size and position is determined by the element’s distance to the mouse cursor.

Check out the DEMO. As always, feel free to tell the author what you think about his plugin by forking it over at his GitHub page.

Incoming search terms for the article:

How to Create an Elastic Image Slideshow with Thumbnail Preview

Marvin@Blogfreakz — Thu, 03 May 2012 02:32:56 +0000

Web developer Mary Lou shows an easy-to-follow tutorial on how you can make a cool elastic image slideshow with thumbnail preview. The slideshow automatically adjusts and you can navigate the slides by using thumbnail preview.

Click on the image to view her tutorial.

Check out the DEMO and DOWNLOAD as well.

Incoming search terms for the article:

Multiple Backgrounds with CSS

Marvin@Blogfreakz — Fri, 27 Apr 2012 09:14:52 +0000

Web developer David Walsh has a great tutorial to share with us, which is making a multiple background with CSS. This feature is a very useful tool in preventing the need for nested elements. Click on the image to see his tutorial.

Here’s the DEMO, and the CSS code:

#multipleBGs {

background: url(photo1.png),

url(photo2.png),

url(photo3.png)

background-repeat: no-repeat,

no-repeat,

repeat-y;

background-position: 0 0,

30px 70px,

right top;

width: 400px;

height: 400px;

border: 1px solid #ccc;

Incoming search terms for the article:

Create An Animated 3D Bar Graph/Chart

Keith@Blogfreakz — Fri, 27 Apr 2012 09:02:41 +0000

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 the image to view the demo.

Alternatively, you can check out the code in their step-by-step tutorial over or just download it here.

Incoming search terms for the article:

Louis Remi’s Amazing CSS Menu Effects

Keith@Blogfreakz — Tue, 24 Apr 2012 06:39:18 +0000

There’s this simple yet brilliantly designed menu created by one Louis Remi that caught my eye while I was looking for some design inspirations to feature here on Blogfreakz and well, seeing his amazing work sure compelled me to share it with you!

I admit that at first glance I didn’t notice anything special about it because of its simple design, but when I started hovering the mouse cursor over it, that’s how I found the magic behind it.

In the demo page, you can see pretty much all of the various menu effects that you can accomplish. One thing worth noting if you’re planning on using this is that there’s a “hardcoded” limit of items per submenu, so if you’re going to have any more or less than that, then you should remember to edit the Progressive Anim section of the CSS.

As for browser compatibility, it degrades gracefully in IE8, and whilst some of the effects use 3D transform (which only works in Webkit browsers), it’ll still degrade just the same for FireFox and other browsers as well.

If you have any questions about the code or wish to report any bugs, feel free to go to the author’s GitHub page and fork it.

Incoming search terms for the article:

How To Add CSS-styled Numbers in an Unordered List

Keith@Blogfreakz — Mon, 26 Mar 2012 01:15:49 +0000

When you make a numbered list in HTML with the ordered list (

Chris Coyier

For example you want to number the Q-and-A pairs in an FAQ list and then add styles to those numbers at the same time, you’ll start with your basic HTML markup like this:

HTML

How much wood   would a wood chuck chuck if a wood chuck could chuck wood?

1,000,000

What is the   air-speed velocity of an unladen swallow?

What do you   mean? An African or European swallow?

Why did the   chicken cross the road?

To get to the   other side

The lines tagged with

will be the question, which you’ll be applying the numbers to. Your basic CSS code would then be something like this:

CSS

.faq {

counter-reset:   my-badass-counter;

.faq dt:before {

content:   counter(my-badass-counter);

counter-increment:   my-badass-counter;

}

All you have to do at this point is to add the styles you want in the :before element. For example, if you want your unordered list to look like this:

Click on the image above to see more lists in the demo.

Just add a few more code (in bold) into your CSS like this:

.faq {

counter-reset:   my-badass-counter;

.faq dt {

 position: relative;

 font: bold 16px Georgia;

 padding: 4px 0 10px 0;

.faq dt:before {

content:   counter(my-badass-counter);

counter-increment:   my-badass-counter;

position: absolute;

 left: 0;

 top: 0;

 font: bold 50px/1 Sans-Serif;

.faq dd {

 margin: 0 0 50px 0;

.faq dt, .faq dd {

 padding-left: 50px;

Notice that we added 2 more styles to adjust the margin and the padding so the numbers won’t sit too close beside the list items. Hope you all enjoy this tutorial!