Multi
Multi
[CSS Snippet] Gradient Submenu with Opacity
Topic Started: Monday, 19. December 2011, 05:47 (1,157 Views)
Night Rage
No Avatar
Level 5
Gradient Submenu with Opacity
by Night Rage

The Basic Coding for a Gradient Submenu with drop down transparent links. It has the The drop shadow and round corner added in as well and is Supported in IE, Firefox, Opera, and Chrome


How to make it a gradient
Quote:
 

background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
Background color for Menu
Darker color it fades into.
Sets order of colors to show up in gradient


How to make the corners round
Quote:
 
-moz-border-radius: 0px;
border-radius: 0px;
Makes the borders rounded


How to make some drop shadow
Quote:
 
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
Determines how thick border is what color and how much its shadowed


How to make it transparent
Quote:
 
opacity: 0.9;
.9 = 90% Transparent

CSS

Coding
Off
Profile
Quote
Top
 
Robot
No Avatar
Level 9
http://www.colorzilla.com/gradient-editor/

Here you go. No need to learn anything when you've got buttons to push and sliders to move :P
Off
Profile
Quote
Top
 
Night Rage
No Avatar
Level 5
:( I tried to contribute to the community but got beat by buttons.
Off
Profile
Quote
Top
 
Robot
No Avatar
Level 9
Night Rage
Tuesday, 20. December 2011, 22:50
:( I tried to contribute to the community but got beat by buttons.
You copied and pasted a lot of CSS that I doubt you understood. Maybe try explain that. As in, create a CSS only dropmenu from scratch. ;)
Off
Profile
Quote
Top
 
Night Rage
No Avatar
Level 5
I have made one from scratch before :3 and I know exactly what I did but I guess I should explain it more.
Off
Profile
Quote
Top
 
FallenShadow
No Avatar
The Stoner Artist
Flavius doesn't believe that anyone but him knows coding when they're making things or posting things.

It's always nice to learn to do things the real way, even if you didn't write it/understand it, thanks for posting it because I'm sure it will help some people who didn't know it.
www.FallnShadw.com
Personal and Professional Portfolio. Officially Open.
Off
Profile
Quote
Top
 
Robot
No Avatar
Level 9
FallenShadow
Friday, 23. December 2011, 05:01
Flavius doesn't believe that anyone but him knows coding when they're making things or posting things.
Not really what I meant, as I believe many others. I just didn't know how much he actually know of CSS and with the little PHP he know, I assumed there was a relation. My mistake. ^.^
Edited by Robot, Friday, 23. December 2011, 05:10.
Off
Profile
Quote
Top
 
Night Rage
No Avatar
Level 5
Yeah its ok. The one Thing I'm good at is HTML and CSS :3 That I can say PHP im still bleh in XD
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
I'd have to agree with both Flavius and Fallen. In order to produce high quality documentations you have to explain what everything does in a way that everybody will understand. Even if you use ColorZilla's gradient generator it's always wise to learn the inner workings of something so you have a greater understanding of what you are doing. However, everybody is still learning and as such nice job and I'm sure tons of people will benefit from this despite the brevity of actual explanation.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..