javascript - How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS -


i'm looking make page has background gradient changes color every few seconds , blends between transitions. want apply effect on upper elements blocked element has solid background.

to give better example mean have attached simple mockup , understand i'm attempting do, i'm open suggestions.

jquery , css

the problem block contains black background png transparent used see black not gradient.

i'll include sample code far:

<body><!-- jquery script used add css background, easy stuff --> <div class="blackbox">     <div class="logo"><img src="#" alt=""></div>     <hr class="h-line">     <div class="v-line"> </div> </div>

so i'm after either:

  • a known jquery method obtain background image needs able refer of position of gradient inline background.
  • a better solution getting work, please bare in mind page needs responsive use other methods since responsive can't think of any.

since ask alternatives jquery solutions

you play little margins , box-shadow , keyframe animations.

something in direction shape (depends on want part - add content ... , in way want responsive):

html:

<div class="wrapper">     <div class="header"><img src="http://i.imgur.com/cuboixr.png" alt="company name" /></div>     <div class="content"></div> </div>

css:

body {     background:orange;     width:100%;     height:100%; } .wrapper {     width:40%;     height:90%;     border:30px solid #000;     border-right-width:100px;     border-bottom-width:100px; } .header {     width:100%;     border-bottom:10px solid transparent;     -webkit-box-shadow: 0 30px 0 #000;     -moz-box-shadow: 0 30px 0 #000;     box-shadow: 0 30px 0 #000; } .header img {     width:100%; } .content {     width:95%;     height:400px;     background-color:#000;     margin-top:30px; }

demo

this way no javascript needed. , background can use linear gradient , animations css transitions or keyframe animations. need play lengths , adjust borders , box-shadows needs, maybe add @media queries responsiveness.

hope helps little in right direction =)

update:

i hoped gradients changing smaller problem ;-) silly me, sorry.

i elaborate css-only suggestion animation, can choose javascript slider background animation, if don't css3 solutions - although hot stuff ;-)

ok. so, add more fixed positioned elements gradient backgrounds (layer1 , layer2).

to have in direction in html now:

<div class="layer layer1"></div> <div class="layer layer2"></div> <div class="wrapper">     <div class="header">         <img src="http://newtpond.com/test/company-name.png" alt="company name" />     </div>     <div class="content"></div> </div>

and add keyframe animation on them in css (here -webkit vendor prefix [probably cause lazy bum], hope can idea, , add others):

body {     width:100%;     height:100%;     margin:0;     padding:0; } /* animation */  .layer {     position:fixed;     width:100%;     height:100%; } @-webkit-keyframes golayer1 {     0% {         opacity:1;     }     50% {         opacity:0;     }     100% {         opacity:1;     } } @-webkit-keyframes golayer2 {     0% {         opacity:0;     }     50% {         opacity:1;     }     100% {         opacity:0;     } } .layer1 {     background: -webkit-linear-gradient(bottom, rgb(43, 70, 94) 29%, rgb(194, 41, 41) 65%, rgb(155, 171, 38) 83%);     -webkit-animation: golayer1 5s infinite; } .layer2 {     background: -webkit-linear-gradient(bottom, rgb(225, 202, 230) 29%, rgb(39, 163, 194) 65%, rgb(36, 124, 171) 83%);     -webkit-animation: golayer2 5s infinite; } /* wrapper shape */  .wrapper {     z-index:999;     opacity:1;     position:relative;     width:40%;     height:90%;     border:30px solid #000;     border-right-width:100px;     border-bottom-width:100px; } .header {     width:100%;     border-bottom:10px solid transparent;     -webkit-box-shadow: 0 30px 0 #000;     -moz-box-shadow: 0 30px 0 #000;     box-shadow: 0 30px 0 #000; } .header img {     width:100%; } .content {     width:95%;     height:400px;     background-color:#000;     margin-top:28px; }

demo (tested in chrome 26 - looked cool =)

this can point according css-only approach. there still stuff modify , consider browser compatibility. alternative ... , step in direction html5 , css3 going (if want hot , cool ;-), hehe, sorry, silliness.

good luck!

update 2:

so, overcame laziness tiny bit , added more vendor prefixes top example (and of course can use image background):

demo

and here add example, using png image gradient, , sliding , down in background (as alternative):

demo


Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db : ...
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite...
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle); ...
Read more