All geek questions in one place

Specify the width of the width of the box shadow

I am trying to add a shadow to a div element. But only up to 90% of the width of the div and with margin-left of 10%. It was an attempt

<div id="post-headline"> <div id="post-headline-date">33.12</div> <div id="post-headline-title"><?php the_title(); ?></div> <div id="post-headline-author"><?php the_author(); ?></div> <div id="shadow"></div> </div>

CSS

 #shadow{ position:relative; height:5px; z-index:0; width:96%; left:3.7%; top:-6px; -moz-box-shadow: 0px 5px 4px #888; -webkit-box-shadow: 0px 5px 4px #888; box-shadow: 0px 5px 4px #888; }

But it seems that the percentages do not refer to the size of the "post-header". At different screen resolutions there are different values. What am I doing wrong?

Example: res1:

  • ---------------- Title
  • ------------ shadow

res2:

  • ---------------- Title
  • ----------------- shadow

UPDATE My CSS

 #post-headline { position:relative; background-color: #3366cc; color:#fff; left:-60px; height: 40px; width: 106.5%; z-index:1; } #post-headline:after{ content: " "; position:absolute; width: 95.7%; right: 0; bottom: 0; height: 20px; -moz-box-shadow: 0px 5px 4px #888; -webkit-box-shadow: 0px 5px 4px #888; box-shadow: 0px 5px 4px #888; } #post-headline-title { margin-left: 60px; } #post-headline-author{ font-weight:bold; margin-left:60px; } #post-headline-date{ position:absolute; margin:8px; font-weight:bold; font-size:12px; } #post-headline-triangle { z-index:-1; left: -51.7px; top:-31px; height:45px; width:45px; background-color:#0033cc; transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

My php

 <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="post-headline"> <div id="post-headline-date">33.12</div> <div id="post-headline-title"><?php the_title(); ?></div> <div id="post-headline-author"><?php the_author(); ?></div> </div> <div id="post-headline-triangle"></div> ... <?php endwhile;endif; ?> </div>

Still not working: /

+4
source share
1 answer

You can do it like this: http://codepen.io/pageaffairs/pen/DAvoj

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> body {margin: 0; padding: 0;} #post-headline{ position:relative; background: white; } #post-headline:after{ content: " "; position:absolute; width: 90%; right: 0; bottom: 0; height: 20px; z-index:-1; -moz-box-shadow: 0px 5px 4px #888; -webkit-box-shadow: 0px 5px 4px #888; box-shadow: 0px 5px 4px #888; } </style> </head> <body> <div id="post-headline"> <div id="post-headline-date">33.12</div> <div id="post-headline-title"><?php the_title(); ?></div> <div id="post-headline-author"><?php the_author(); ?></div> </div> </body> </html>
+4
source

Source: https://habr.com/ru/post/1486451/

More articles:


All Articles