Layout/Styling

CSS3 New features – Interesting info ;)

0
972 days
by in CSS, Graphic Design, Layout/Styling, Web-related

Hello fellow developers,
I'm sure all of you have heard of the "new" CSS3 stuff, it's been around for a while now, and it certainly has some very interesting new features.

First, I'll review some of the things that were the hardest to develop, yet they looked so damn well:

  • Rounded corners - We all love them, but how hard is to find a good way to do them?
  • Alpha transparency - PNGs, JavaScript tweaks... I must admit they are hard...

Plus, I'll show you how to create rounded+transparent borders!

Conclusion: The world needs new CSS features:

Solution: CSS3

Let's get going

Now before we get too exited, take into account that these new features "work" on major browsers, except obviously IE. So I would never use them for client sites... Meaning that you should only use these for personal designer portfolios, where you want to impress colleagues.

So now that this was clear, let's see how the new stuff goes:

Rounded corners:

For this you only have to select the element and use the following CSS code:

 
#example{
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
 

Demonstration:

Example Div (CSS code for it below)

CSS for the example:

 
	background-color:#FFFFFF;
	border:#CCCCCC solid 2px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding:30px;
	text-align:center;
 

For more options go to the official CSS3 specs page for rounded corners

Transparency

This one is one of my favorites, combined with rounded corners :)

The way it works is simple, you can make any background color transparent by using one of several methods, I will show you the one I consider the easiest.

You know how in normal CSS we can select colors via the RGB color code, as in:

 
color: rgb(0,0,0);
 

Well, in CSS3 we can now add a fourth parameter, that will contain the alpha information, from 0 to 1.

Demonstration:

Example div. CSS for it below

CSS for the example above:

 
	background-color:rgba(0,0,0,0.5);
	color:#000;
	padding:30px;
	margin:20px;
	border:#CCCCCC solid 2px;
	text-align:center;
 

This effect won't look as cool here, because the background is a plain color. Use it over textured backgrounds for a great effect!

Rounded+transparent borders!

These really look amazing, rounded, transparent borders! Take a look at a live example

Unluckily, we cannot use rbga() colors on borders, but there is a simple workaround, embed the div you want with another one, with a padding of the size of the border (It looks better with larger borders)

Demonstration:

Example CSS below

CSS for the example above:
DIV 1 (Outer div) - Note the bigger radius

 
margin:20px;
padding:20px;
background-color:rgba(0,0,0,0.5);
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
 

DIV 2 (Inner div)

 
padding:20px;
text-align:center;
background-color:#FFFFFF;
color:#333333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 

Well, I hope you found this interesting!

Show us your uses!

Have you already implemented any of these techniques? Please show us!
Comment below with the URL of the site where you used the new features of CSS3

Beautiful tab design:

0
1365 days
by in CSS, Layout/Styling

This article is not on how to create tabbed menus, is just about how to style them!
I completely forgot who was the source, so if you happen to be the author comment your URL and I'll put up a link :S

Anyway, I found that this is by far the easiest and probably most beautiful design for liquid rounded tabs out there, that requires absolutely no tweaking or adjusting.
It uses only one background image, which contains at the same time the normal state, hover state, and active state. In this case the image is a png image in white, and grey tones, but that can be easily changed in photoshop.
Here is the image in question:
Tab image

As you can see it has the three tab states on it. We will use CSS background position abilities to make it look as if we are changing the image.
Now to make the tabs have liquid width we will use an a element for the left corner and a span for the other one.
Here is the CSS source:

@charset "utf-8";
/* CSS Document */
ul.cftab,ul.cftab li{border:0; margin:0; padding:0; list-style:none;}
ul.cftab{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
margin-bottom:20px;
}
ul.cftab li{float:left; margin-right:2px;}
 
.cftab a:link, .cftab a:visited{
background:url(tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.cftab a span{
background:url(tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.cftab a:hover{
background:url(tab-round.png) right 30px;
display:block;
}
.cftab a:hover span{
background:url(tab-round.png) left 30px;
display:block;
}
 
/* -------------------------------- */
/* ACTIVE ELEMENTS */
.cfactive a:link, .cfactive a:visited, .cfactive a:visited, .cfactive a:hover{
background:url(tab-round.png) right 0 no-repeat;
}
.cfactive a span, .cfactive a:hover span{
background:url(tab-round.png) left 0 no-repeat;
}

To have it working you must use html code in the following way:

Notice that the ul has the class cftab, you can change that to anything you want, but remember to change it also in the CSS. The prefix cf is just used to avoid collisions with other styles you might already have.

I haven't set up a demo page, but it is so simple that if you want to test simply copy the codes and paste them on an html page and try it...

Enjoy,

Best Photoshop brushes for web designers

14
1378 days
by in General talk, Graphic Design, Layout/Styling, Photoshop, SEO, Web-related, WordPress

Here is a (huge) compilation of the best free Photoshop brushes out there. They are the ones I use, and the ones it took me a very long time to find over the web.
I've selected the best of them, and along with a preview and a description, I've made a zip file that contains the whole compilation.
For all brushes hosted at brushes.500ml.org you'll have to navigate to the brushes, since they don't allow direct linking...
If you enjoy this set of brushes consider blogging about it ;)

Take into account that this is a huge list of brushes, and it takes a long time to download. Also, the mirrors might only be available for a limited time, so if you find them to be broken please notify me
And here is the list (Alphabetically ordered)

Art nouveau

This beautiful set features 8 brushes with patterns and designs following art nouveau techniques and style.
Visit the brush homepage
Art Nouveau brush set

Botanical flowers

This is a very nice set of brushes, specially for "natural" websites or just as footer decoration.
Visit the brush homepage
Botanical flowers

Bugs and Angels

This is indeed a very strange combination of brushes to put in a set, but both of them are very beautiful and make a good "innovative" design element.
Visit the brush homepage
Bugs and angels

Elegance

One of the best web design brush sets I have ever found. This provides you with some very elegant lines and circles. Worth checking out ;)
(I couln't find the author's website, so if you want the set, download the pack)
Elegance

Feathers

Strange brush set, filled with feathers, but it makes a beautiful texture I guess.
Visit the brush home page (Scroll down a bit, by Sheishido)
Feathers

Floral swirl

A very beautiful brush set, largely used in modern web designs (And in this blog's design too)
Visit the brush homepage
Floral Swirl

Foliage

Another brush set of plant elements. This time it is packed with tree branches, leaves, bushes... Great for some "wild life" designs:
I couldn't find this brush homepage :S
Foliage

Fractals

A nice set of fractal images, these are great to put in backgrounds for scientific websites or pics...
I didn't find the original brush set website, but here at getbrushes.com you can find tons of fractal brushes.
Fractals

Frames

This are good sets (I've put here two sets of frames) to enclose your images in.
Frames 1
Frames 2
I don't remember where I found them, but just search for frame brush sets and you'll find a lot more.

Garden of Decay

One of the most beautiful sets here, nice textures and images. It comes with some handwritten text too.
You can find it here, along with a lot more brushes by Annika
Garden of Decay

Good & Evil

A nice set, featuring some trees, skies, and other textures. Great for image edition, and adding header decoration too.
Brush set website (And also in Annika's website)
Good & Evil

Grunge flowers

Probably the best brush set exposed here. I used it a lot for my backgrounds in this blog's design.
Grunge flowers

Grunge texture

A set of textures to use in "rough" designs probably
Grunge texture

Hair

I really don't know where or why you would use this, but it is a good set of high quality "hairs" :S
Hair

Illusionist

Very strange set of cut & inversed faces. I really don't know how to describe this set. It is very cool though, so check it out.
By Annika Von Holdt
Illusionist

Paint

This is a very useful brush set, it is also the one I used for the header background, those paint strokes. It has both strokes and splatters...
Paint

Patterns

Some patterns for backgrounds or buttons, or whatever you want them for.
Patterns

Splatter

Another set similar to the paint set, but this time focused on Paint splatters. If you want to add splatters to your designs, this is your set!
Paint splatter

Valentine

A very romantic set, with hearts, roses, hand-written text... You'll love it ;)
Valentine

Victorian people

This is probably a very strange brush set you might think you'll never have to use, but once you have it, you'll use it. Guaranteed. It features full-body pictures of Victorian people.
Victorian people

Important notes & download

Please do not hotlink the images nor the zip file with the compilation, instead link to this article please.
I couldn't find most of the brush sets websites because over the years I have renamed most brush set names, so if you are the owner or creator of them and I have not placed a link to you please comment it below.
Also, if you think a link was misplaced do comment.

Download the compilation

Here you can download all of the brushes before. They come in a zip file, ready to send to photoshop.

You don't know how to import them in photoshop?
Simply go to the install location of photoshop (Normally in C:\Program files\Adobe\Photoshop). Open it up and search for a folder called "Prestablished settings", once there go to "Brushes" and paste the content of the zip file.
If you had Photoshop already opened you'll have to close it and re-open it to use your new brushes.

Enjoy :)

Reseting CSS default browser settings:

6
1380 days
by in CSS, Graphic Design, Layout/Styling, Reviews, Web-related

One of the biggest problems when designing a website is that after all work is done it looks different on different browsers.
The solution usually used by most web developers consists on manually changing every bit of CSS they have to make it look all the same, resulting on a very hard and time-consuming approach.

A great solution that requires absolutely no extra-work is to reset all CSS settings so that there is absolutely no style assigned to any html elements.
This way you'll have to reapply all styles to all elements, but you'll be sure that once you are done, it looks the same on all browsers.

Here is the CSS code you'll use, developed by David Hellsing at Tripoli:

 
@charset "utf-8";
/* CSS Document */
 
/*
    Tripoli is a generic CSS standard for HTML rendering.
    Copyright ( C ) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http ://www.gnu.org/licenses/>.
*/
 
* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
}
dfn, i, cite, var, address, em {
	font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
	border: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td, center {
	vertical-align: top;
	text-align: left;
}
body {
	background: white;
	line-height: 1;
	color: black;
}
q {
	quotes: "" "";
}
ul, ol, dir, menu {
	list-style: none;
}
sub, sup {
	vertical-align: baseline;
}
a {
	color: inherit;
}
hr {
	display: none;
}
font {
	color: inherit !important;
	font: inherit !important;
	color: inherit !important; /* editor's note: necessary? */
}
marquee {
	overflow: inherit !important;
}
blink {
	text-decoration: none;
}
nobr {
	white-space: normal;
}
 

Note that this is just one option, you can find a lot more on this article, down at perishablepress.com

I've been using it in all my websites and I have to say that it really cuts down on developing time. And the results in IE are astounding, I've had to tweak no more than two lines to get it look perfect.
It will reset all margins, colors, underlines, bullet styles...
Remember to place it BEFORE your custom styling, because if not it will override any new setting you have!
The version placed here is "condensed" and hard to read, but taking into account it's purpose I consider this to be a benefit, since it will decrease page size and thus load time...

Try it, test it, and comment here what you think of it!

New version of the nifty corners script

1
1384 days
by in CSS, Javascript, Layout/Styling, Programming, Web-related

I'm sure you've heard of the Nifty Corners js script to create very cool rounded corners, and some of you might even have used it, well there is a new version:
Nifty Corners Cube

It improves most flaws of the first version, plus it adds new features and functionalities. This is the new stuff:

  • The numbers of parameters has been reduced from four of the first version and five of the second version to just two, of which one is optional.
  • It's not necessary specify the colors anymore, since they are detected automatically.
    They're easier to integrate into the design process, since the padding (both horizontal and vertical) of elements to round is preserved
  • It's easier to use them with other scripts
  • The support of CSS selectors has been improved and expanded
  • Just a single line in the head section is now needed for the whole library: even if they're still based on both CSS and javascript, the presentational CSS for Nifty Corners is loaded automatically by js
  • They're now released under GPL licence.

So go on, download it and test it, and tell us how it went ;)

Next »
Go to Top