css - How can I do multiple backrounds in one div tag? -


first off: http://jsfiddle.net/83fdf/

i have image set "menu's" backround... has blue gradient, rounded corners, , @ bottom has white slight shadow under blue menu.

my image

is possible recreate using pure css on 1 div?

html:

<div class="main_content"></div>

css:

.main_content {     width:900px;     height:auto;     background:url(http://i.imgur.com/miont7y.jpg) no-repeat center top #fff;     margin:0 auto;     padding:0 0 50px; }

it indeed possible, note amount of rules required shadows , gradients due different browsers requiring different syntax (-moz- firefox vendor prefix, etc.). here handy tools coming cross-browser gradients , box shadows easily.

read more linear gradients , box shadows here:

jsfiddle

.main_content {     width:100%;     height:auto;     margin:0 auto;     padding:0 0 50px;     /*background-color:#00f;*/      /* add rounded border top left , top right */     border-top-left-radius:6px;     border-top-right-radius:6px;      /* apply gradient background image */     background-image: linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);     background-image: -o-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);     background-image: -moz-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);     background-image: -webkit-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);     background-image: -ms-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);     background-image: -webkit-gradient(         linear,         left bottom,         left top,         color-stop(0, rgb(79,110,189)),         color-stop(1, rgb(44,188,207))     );      /* apply white shadow on bottom */     -webkit-box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.75);     -moz-box-shadow:    0px 4px 10px rgba(255, 255, 255, 0.75);     box-shadow:         0px 4px 10px rgba(255, 255, 255, 0.75); }  body {     margin:0;     background-color:gray; }

Comments

Post a Comment

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

i force app's home screen portrait , other views landscape. apple rejects app if this? if not , how force first screen launch in portrait mode? , force other screens launch in landscape. this not duplicate question search every possible answer in website. i force app's home screen portrait , other views landscape. apple rejects app if this? no apple not reject app this. have lot of apps doesn't support orientation. forcing on 1 screen won't cause app reject. if not , how force first screen launch in portrait mode? , force other screens launch in landscape. can on write : -(nsuinteger)supportedinterfaceorientations; function.
Read more

java Extracting Zip file -

i'm looking way extract zip file. far have tried java.util.zip , org.apache.commons.compress, both gave corrupted output. basically, input zip file contain 1 single .doc file. java.util.zip: output corrupted. org.apache.commons.compress: output blank file, 2 mb size. so far commercial software winrar work perfectly. there java library make use of this? this method using java.util library: public void extractzipnative(file filezip) { zipinputstream zis; stringbuilder sb; try { zis = new zipinputstream(new fileinputstream(filezip)); zipentry ze = zis.getnextentry(); byte[] buffer = new byte[(int) ze.getsize()]; fileoutputstream fos = new fileoutputstream(this.tempfolderpath+ze.getname()); int len; while ((len=zis.read(buffer))>0) { fos.write(buffer); } fos.flush(); fos.close(); } catch (filenotfoundexception e) { // todo auto-generated catch block ...
Read more

C# WinForm - loading screen -

i ask how make loading screen (just picture or something) appears while program being loaded, , disappears when program has finished loading. in fancier versions, have seen process bar (%) displayed. how can have that, , how calculate % show on it? i know there form_load() event, not see form_loaded() event, or % property / attribute anywhere. all need create 1 form splash screen , show before main start showing landing page , close splash once landing page loaded. class splashform { //delegate cross thread call close private delegate void closedelegate(); //the type of form displayed splash screen. private static splashform splashform; static public void showsplashscreen() { // make sure launched once. if (splashform != null) return; thread thread = new thread(new threadstart(splashform.showform)); thread.isbackground = true; thread.setapartmentstate(apartmentstate.sta); thread....
Read more