The MegaMag

Logos Friday#5: Geometric shapes and more

Fatma Alemadi — Fri, 13 Aug 2010 12:40:35 +0000

Drawing with CSS3 Tips & little more

Fatma Alemadi — Tue, 10 Aug 2010 08:44:37 +0000

You can see a DEMO of all of the examples below

1. Basic shapes

A. Square

This not exactly css3 but I thought we need to cover all shapes and actually this is mostly where all the other shapes will start from. In fact all other shapes will be square with tweaked corners or borders .. you will get the idea later …

1
2
3
4
5
6
7
8

.square{

display:block;
width:100px;
height:100px;
background-color:#ccc;

}

B. Rounded rectangular/square

Using border-radius you can specify the radius of the corner

In css3 the property is border-radius which specify the amount of curve for all corners or for specific corner , however older browser support different form of this property:

-moz-border-radius in Firefox
-webkit-border-radius older safari and Chrome
For you know who!!! .. Internet explorer none .. but this is a hack that you can find here “Css curved corner ” @ Google code . I think it will be supported by the IE9.

More about browser compatibility and comparison can be found in this very informative post by Jerry Seeger .

Back to the fun part ..

1
2
3
4
5
6
7
8
9

.rounded_corner{
display:block;
width:100px;
height:100px;
background-color:#344567;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

This will draw a square with border radius =20px .

1
2
3
4
5
6
7
8
9

.rounded_corner2{
display:block;
width:100px;
height:100px;
background-color:#344567;
-moz-border-radius:20px 40px 0 0;
-webkit-border-radius: 20px 40px 0 0;
border-radius: 20px 40px 0 0;
}

In the previous example you can see that we can change the radius for each corner individually (top/Left ,top/Right , bottom/Right ,bottom/left ) .

C. Circle

1
2
3
4
5
6
7
8

background-color: #c06;
height: 100px;
width: 100px;
display:block;

-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;

A high radius will make the corners blend into a circle .

1
2
3
4
5
6
7
8
9
10
11

.half_circle {
background-color: blue;
height: 50px;
width: 100px;
display:block;

-moz-border-radius:75px 75px 0 0 ;
-webkit-border-radius: 75px 75px 0 0 ;
border-radius: 75px 75px 0 0 ;

}

The trick to make half circle is to make the height = 1/2 width or width =1/2 height depends on the orientation of the shape in the above example the height is 50 and the width is 100 . The top right and left corners are curved so we can achieve half circle effect …

1
2
3
4
5
6
7
8
9

.q_circle {
background-color: green;
height: 50px;
-moz-border-radius:75px 0 0 0 ;
-webkit-border-radius: 75px 0 0 0 ;
border-radius: 75px 0 0 0 ;
width: 50px;
display:block;
}

With the quarter square the width and height can still be the same and only one corner is curved … Cool isn’t it

D. Trianlge

I found this cool and simple trick at Jon Rohan blog ..

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent

1
2
3
4
5
6
7

.triangle {
border-color: red transparent transparent transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}

As we all know we have 4 borders the first one is red the other 3 are transparent .

More examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.triangle2 {
border-color: transparent yellow transparent transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}
.triangle3 {
border-color: transparent transparent green transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}

.triangle4 {
border-color: transparent transparent transparent orange;
border-style:solid;
border-width:40px;
width:0;
height:0;
}

2. More tools

More tools to help you with your drawing process ..

a. Transparency

1
2
3
4
5
6
7
8
9
10
11
12
13

.trans {

/* for IE */

filter:alpha(opacity=50);

/* FF */

-moz-opacity:0.5;
/* CSS3 standard */
opacity:0.5;

}

b. Rotation

Rotating an element can help you in creating a third one . For example rotating a square can create a diamond shape.

1
2
3
4
5
6
7
8
9
10

/* for firefox, safari, chrome, and others . */

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

/* for IE */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
>>

According to snook.ca

In order to perform a transformation, the element has to be set to

1
display:block

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

C. Gradient

Another cool touches to your master piece .Here is a quick way

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Div{

/* For Older Browsers */

background: #fff;

/* For IE */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');

/* For webkit Browser (Safari , Chrome .. etc) */

background: -webkit-gradient (linear, left top, left bottom, from(#fff), to(#000));

/* For firefox 3.6 and more */

background: -moz-linear-gradient(top, #fff, #000);

}

For older browsers that don't support css3 there will be one solid color .

1	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');

For IE it's not css3 but it's the 2nd best thing .. A way to apply the gradient using filters .

1	background: -webkit-gradient (linear, left top, left bottom, from(#fff), to(#000));

For safari and chrome .. etc use -webkit-gradient

we specified the gradient as a liner at the first parameter .
Left top : are the starting point
Left bottom : are the ending points .
from (#fff) : the first color
to(#000) : the 2nd color

1	background: -moz-linear-gradient(top, #fff, #000);

with firefox it's quite different

-moz-linear-gradient : This is means start a linear gradient
top: is the starting position .
#fff : is the first color.
#000 : is the last color

More info and options about the gradient property visit the art of web .

Examples

Those are fairly simple examples for demonstration purpose .

Let's have some fun..Happy face...

I haven't done stunning drawings like the Steve Dennis " Fail whale " but ..

Just like " Hello world " codes .. I will do happy face example .. which was 1 large circle head , 2 small Circles for the eyes and half circle for the mouth .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.happyface {
background-color: yellow;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 100px;
text-align :center;
position :relative;
}
.happyface b {
background-color: black;
height: 20px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 20px;
display:block;
float:left;
margin-left:20px;
margin-top:25px;
}
.happyface i {
background-color: red;
height: 30px;
-moz-border-radius:0 0 75px 75px ;
-webkit-border-radius: 0 0 75px 75px;
border-radius: 0 0 75px 75px;
width: 50px;
display:block;
position :absolute;
bottom:12px;
left:24px;
}

and the css is

1 2	>> >> > > >>

the B tags are where the eyes are and the I tage is where the mouth is .

One more please .. My house ..

Another very basic example that I did was a house .OK this is the Mom side of me .. when my kids start drawing I first teach them how to draw a face .. then a house .. then a car .This is just a habit that I can't break ..sorry!

The house is triangle on top or a square .. 2 squares for the windows and a rectangle for the door and a shining sun .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

.frame{
background:blue;
padding:10px 10px 0 10px;
width:300px;
margin:0 auto;
text-align :center;
background: -moz-linear-gradient(top, #7AA9DD, #D9D9F3);
min-height:200px;
position:relative;
}
.house {
position:absolute ;
margin:0 auto;
display:block;
width:100px;
height:100px;
background: -moz-linear-gradient(top, #8B5A2B, #8B5A2B);
bottom:0;
left:100px;
}
.house:before {
border-color: transparent transparent #603311 transparent ;
border-style:solid;
border-width:50px;
width:0;
height:0;
display:block;
content:"\00a0";
position:absolute;
z-index:1;
top:-100px;

}
.house span{
display:block;
width:30px;
height:30px;
background-color:#FEE5AC;
float:right;
margin-right:14px;
margin-top:6px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-kcss-opacity: 0.5;
opacity: 0.5;

}
.house b{
display:block;
width:40px;
height:60px;
background-color:#FEE5AC;
position :absolute;
bottom:0;
right:30px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-kcss-opacity: 0.5;
opacity: 0.5;

}
.sun {
background-color: yellow;
height: 70px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 70px;
display:block;
}

and the css

1
2
3
4
5
6
7

class="frame">

class="sun"> >
class="house"> class="window"> >
class="window"> >
> >>
>

More "Crazy Cool" Examples

Although some of the following example are more in the fun and experimental part but you still can use some of the techniques and integrate them into your design .

Pure Css3 bokeh effect

Photoshop Like buttons

Pure Css speech bubble

Opera Logo

A house

I like mine more Never mind I'm just jealous .

Social media icon

A Heart and some more

Ipod

Parrot

Css Typeface

IE logo

Funny how it renders in IE !

Logos Friday #4: Beautiful Animals inspired logo

Fatma Alemadi — Fri, 30 Jul 2010 14:30:15 +0000

8 css3 text-shadow effects

Fatma Alemadi — Thu, 29 Jul 2010 12:28:46 +0000

Let’s Start

The property text-shadow add one or more shadow to a text .It’s included into Css3 text module .

Syntax

The vertical and horizontal distance can have + or – values . They also can have the value 0.
Blur radius : Represents the size of the blur effect if the value is zero or it wasn’t represented then the shadow won’t be blurred .
Color:is the Shadow color . If it is not represented then the shadow color will use the text color instead .

Browser Support :

Opera 9.5+( Although I’ve noticed that color: transparent was not supported )
Firefox 3.5+
Safari 1.0+
Google Chrome

Demo

You can see a demo of all the effects below on the Demo page … enjoy

1. Glow and extra glow

To achieve the glow effect

1
2
3
4
5
6
7

.glow {

color:#FFFFFF ;

text-shadow:0 0 20px yellow ;

}

Try experimenting …change the radius value to get different effects .

Using the previous cc will add some glow but not as intense as sometimes you might need the solution is to add multiple shadows with different radius values .

1
2
3
4
5
6
7

.extraGlow {

color:white;

text-shadow:0 0 30px yellow , 0 0 70px yellow ;

}

We’ve added 2 shadows with 30 and 70 radius values with the same yellow color .

2. Apple style

Pretty simple .. That’s why I love css3

1
2
3
4
5
6
7
8
9

.applestyle{

background:#666

color: #000;

text-shadow: 0px 1px 1px #fff;

}

3. Photoshop Emboss

1
2
3
4
5
6
7
8
9

.Emboss {

background:#ccc ;

color:#ccc;

text-shadow: -1px -1px white, 1px 1px #333;

}

I used multiple shadows here to achieve the effect one to the top/right other to the bottom/left .One down side to this is that if the browser doesn’t support text-shadow (you know what and who I’m talking about ?! ) then you’ll end up with unreadable text .

4. Photoshop Pillow emboss

1
2
3
4
5
6
7
8
9
10
11

.PillowEmboss {

background:#ccc;

color:#ddd;

text-shadow: 1px 1px white,

-1px -1px #444;

}

Again multiple shadows used here .

5. Blurry text

I found this at Simurai Website. Which is a cleaver trick to make the text color transparent and add a blurred shadow to achieve a blurred text effect.Changing the radius value will change the blur value the higher the value the more blurred text you’ll get.

1
2
3
4
5
6
7

.blurytext {

color: transparent;

text-shadow: #fff 0 0 10px;

}

6. Inset text

I found this trick at StylizedWeb .This a very light and elegant effect it adds a nice touch to the text .

1
2
3
4
5
6
7
8
9
10
11

.insettext{

color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

The shadow color and the background color are the same .

7. Stroke text

I will admit this is not a very neat effect and needs little improvement to have “realistic” look stroke ..but thought I’ll add it any way .

1
2
3
4
5
6
7
8
9
10
11

.Stroke{

color:red;

font-weight: bold;

text-shadow: 1px 1px 0px #000,

-1px -1px 0px #000;

}

By adding 2 shadows in the opposite directions you can have what looks like a stroked text.

8. 3D effect

I love this .. I can’t think of much uses for it but I still love it .Found this on Css-trick and thought it’s really cool .By adding multiple shadows with the same color you can achieve what looks like a 3d text .

1
2
3
4
5
6
7
8
9

.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}

I added 5 shadows but try experimenting , be creative and have fun .

Cool “Etsy” geeky finds

Fatma Alemadi — Wed, 28 Jul 2010 11:59:55 +0000

Logos Friday#3 inspiration

Fatma Alemadi — Fri, 23 Jul 2010 13:40:34 +0000

Ads Tuesday#2 :Full Inspiration

Fatma Alemadi — Tue, 20 Jul 2010 16:02:10 +0000

3 cool text effects Gold , Metal & plastic in photoshop

Fatma Alemadi — Sat, 17 Jul 2010 22:45:48 +0000

1- Clear plastic text effect

Step 1

Add your text ..

Step 2

double click the text layer and add the following effects

If you can’t see the “Gloss Contour ” I’m using .Click on the contour list and do the following to add them .

2- Gold .. Gold

Step 1

Add your text

Step 2

Add the following effect

3- Metallic text

Step 1

Add your text choose (#c1bfbf) as you foreground color .

Step 2

Add the following effects

Logos Friday#2 inspiration

Fatma Alemadi — Fri, 16 Jul 2010 12:23:15 +0000

Ads Tuesday #1: 43 cool ads

Fatma Alemadi — Tue, 13 Jul 2010 12:20:20 +0000

The MegaMag

Logos Friday#5: Geometric shapes and more

Related Posts:

Drawing with CSS3 Tips & little more

You can see a DEMO of all of the examples below

1. Basic shapes

A. Square

B. Rounded rectangular/square

C. Circle

D. Trianlge

2. More tools

a. Transparency

b. Rotation

C. Gradient

Examples

Let's have some fun..Happy face...

One more please .. My house ..

More "Crazy Cool" Examples

Related Posts:

Logos Friday #4: Beautiful Animals inspired logo

Related Posts:

8 css3 text-shadow effects

Let’s Start

Syntax

Browser Support :

Demo

1. Glow and extra glow

2. Apple style

3. Photoshop Emboss

4. Photoshop Pillow emboss

5. Blurry text

6. Inset text

7. Stroke text

8. 3D effect

Related Posts:

Cool “Etsy” geeky finds

Related Posts:

Logos Friday#3 inspiration

Related Posts:

Ads Tuesday#2 :Full Inspiration

Related Posts:

3 cool text effects Gold , Metal & plastic in photoshop

1- Clear plastic text effect

Step 1

Step 2

2- Gold .. Gold

Step 1

Step 2

3- Metallic text

Step 1

Step 2

Related Posts:

Logos Friday#2 inspiration

Related Posts:

Ads Tuesday #1: 43 cool ads

Related Posts: