Ask your WordPress questions! Pay money and get answers fast! (more info)

Background gradient & border radius css question/suggestions WordPress

  • SOLVED

Hi Guys

I need to changee the header background on the boxes of this site

http://theworkingmanager.com/

I've done a quick video to explain

http://screencast.com/t/v7Y9bd8Fx

Just a nudge in the right direction would be helpful.

Its mainly the gradient from left to right and how I would do that with css. The border radius is not a problem.

Any css snippet ideas will be really appreciated.

Many thanks
Steve

Answers (3)

2013-10-21

Sébastien | French WordpressDesigner answers:

[[LINK href="http://css3generator.com/"]]http://css3generator.com/[[/LINK]]


.topbox h1 {
-webkit-border-radius: 0px 20px 0px 0px;
border-radius: 0px 20px 0px 0px;

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 55%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(55%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}


Steve Watson comments:

Brilliant Sebastien, thanks

Can you just help me with two little problems.

1. Removing the grey border from jus the header area
2. Making H1 text white

I tried to add color: #ffffff; to the .topbox h1 class but I think its being selected from elsewhere, maybe a link (a,) element

see this screenshot: http://screencast.com/t/4ymM3cEhJh

Great stuff thanks :)


Sébastien | French WordpressDesigner comments:

all the code will be :


.topbox,.topbox h1 {
-webkit-border-radius: 0px 20px 0px 0px;
border-radius: 0px 20px 0px 0px;
}

.topbox h1 {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 55%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(55%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}

#ez-home-container-wrap .ez-widget-area .topbox h1 a {
color:#fff;
}


Sébastien | French WordpressDesigner comments:

if you want to do the same thing on the second line (midbox) you must use this code instead of the previous code :


.topbox,.topbox h1,
.midbox,.midbox h1 {
-webkit-border-radius: 0px 20px 0px 0px;
border-radius: 0px 20px 0px 0px;
border:0;
}

.topbox h1,.midbox h1 {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 55%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(55%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#2989d8 55%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}

#ez-home-container-wrap .ez-widget-area .topbox h1 a,
#ez-home-container-wrap .ez-widget-area .midbox h1 a {
color:#fff;
}


Steve Watson comments:

BRILLIANT!! thank you so much...


Sébastien | French WordpressDesigner comments:

you're welcome :-)

2013-10-21

Sachindra Narayan answers:

.topbox h1{
background-image: linear-gradient(90deg, #0156CB, #1D7AF8)
}
.topbox{
border-radius:0px 15px 0px 0px;
}

2013-10-21

Balanean Corneliu answers:

For the future just use this one to generate what you whant.

http://www.colorzilla.com/gradient-editor/


Balanean Corneliu comments:

To keep the instruction from exemple you need :


border-radius: 0px 35px 0px 0px;
and
padding: 8px 0;




Balanean Corneliu comments:

Dont miss to set the border-radius for each .topbox h1{ and .topbox {


Balanean Corneliu comments:

The text color is located here:

#ez-home-container-wrap .ez-widget-area a, #ez-home-container-wrap .ez-widget-area a:visited {
color: #FFFFFF;
text-decoration: none;
}


Balanean Corneliu comments:

http://theworkingmanager.com/wp-content/themes/dynamik/css/dynamik-min.css


Balanean Corneliu comments:

But in that line you have the color for other text to then you need to create a new class to color just the title.