This is what i´m trying to achieve:
But I can´t make the background be as long as the text while keeping the shadow with the whole content... I just get this:
As you can see it makes two shadows... this is my markup and css:
<span class="interior_title">Samsung, HP Pop-Tops Do Double Duty <br>Rich Jaroslovsky</span>
span.interior_title{
background: #c7c7c9;
font-size: 50px;
color: #2f2f31;
width: 550px;
font-family: 'chaletcomprime';
margin: 0 auto;
text-transform: uppercase;
line-height: 47px;
padding: 0px 15px;
margin-left: 90px;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
Any ideas on how to do it?
Example
It's close to what you want.
I made it like this. Two elements floated left one under the other one. Same style only the width is different.
<span class="one">Extra line here bal bal bal </span>
<span class="two">Line TwoM<span>
Now the problem here was the extra shadow that was casting on .two, I fixed that by using
.two:before{
background: tan;
content: "";
height: 10px;
left: 0;
position: absolute;
top: -10px;
width: 100%; }
Don't worry about IE, because :before work on IE8 as for the box-shadow it stops at IE9.
Related
I'm trying to color two adjacent DIV's with box shadows that extend into each others paths. For some reason the box shadow of one of the elements will bleed onto the top of the other div creating an ugly effect.
Here is the current effect: https://imgur.com/Gs3hT5P
But I am attempting to make it look like this: https://imgur.com/eBQLGCv
The code for what I have is as follows, keep in mind the expected result is not coded in HTML/CSS so maybe what I'm trying to accomplish is not possible with CSS as it is.
span {
position: relative;
display: inline-block;
background: #fff;
width: 40px;
height: 20px;
margin-right: 7px;
border-radius: 1px;
}
span:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
span.red {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue {
box-shadow: 0px 0px 30px 10px #00ccff;
}
<span class="red"></span>
<span class="blue"></span>
A solution is to set the shadows to the before pseudo-elements instead:
span.red::before {
box-shadow: 0px 0px 30px 10px #ff0000;
}
span.blue::before {
box-shadow: 0px 0px 30px 10px #00ccff;
}
Since you set their z-index to -1, those pseudo-elements will be behind their parents, i.e. the span elements.
Update: you fixed the HTML, so for information purposes I let what I wrote below.
Also don't forget to close your span elements this way (see HTML5 standard for more details):
<span class="red"></span>
<span class="blue"></span>
Apparently the text is positioned to the right and I do not know why. Earlier the header was working but now it does not.
.news-box {
background: black;
width: 500px;
height: 450px;
top: 50%;
left: 20%;
transform: translate(20%, 50%);
border-radius: 20px;
box-shadow: 2px 5px 8px 10px rgb(0,0,0,0.5);
}
.news-box > h2 {
color: white;
text-align: center;
padding-top: 10px;
text-transform: uppercase;
-webkit-text-stroke: 0.5px rgb(0,0,0,1);
text-shadow: 2px 2px 4px rgb(0,0,0,0.8);
}
Since i don't have the full code (including html), i can only suggest to put the text inside a <span>text</span> and use styling of float:left (for example).
Another option would be to put it inside a <span> or a <div> and set "text-align:left/right" (whatever works for you)
How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?
Here's my curent code:
HTML
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
CSS
.pageimg {
width: 37%;
float: right;
margin-left: 100px;
box-shadow: 10px 10px #FFE600;
}
Use multiple box-shadows:
img {
box-shadow:
12px 8px 0 0px white,
14px 6px 0 0px yellow,
14px 10px 0 0px yellow,
10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.
.image-container{
position: relative;
display: inline-block;
}
.image-container::before{
content: '';
position: absolute;
border: solid 1px yellow;
width: 100%;
height: 100%;
left: 14px; /* This will be your box shadow x-offset; */
top: 14px; /* This will be your box shadow y-offset; */
z-index: 0;
}
and then your html
<div class="image-container">
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
Note: This question is similar to this question; however, it is different and thus is being asked as a separate question to the one just linked.
I am trying to create a flat long shadow in CSS for the text in a logo. The original way I found to do it is based on Matt Lambert's tutorial. The way Matt proposes to do it would require a lot of CSS (although, kudos to him, it does work and goodness knows I didn't figure that out). So thus that led me to ask for a way to do that with less CSS. #vals figured out how to do that with this.
Now I'm attempting to make a flat-long-shadow (does anyone have a shorter abbreviation for this? how about the acronym: "FLS?") for the text of a logo (i.e. this); however, it isn't going so well...
As you can see from this fiddle I made, I sort of combine the two techniques... but, while it's not atrocious, it doesn't work perfectly...
Here is the same fiddle in a snippet:
/* shadow color: #2d5986 */
html, body {
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
div {
min-height: 128px;
min-width: 128px;
background-color: #369;
color: white;
font-size: 4em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
span {
/* background-color: #47a; */
position: relative;
text-align: center;
text-shadow: #2d5986 1px 1px,
#2d5986 2px 2px,
#2d5986 3px 3px,
#2d5986 4px 4px,
#2d5986 5px 5px,
#2d5986 6px 6px,
#2d5986 7px 7px,
#2d5986 8px 8px,
#2d5986 9px 9px,
#2d5986 10px 10px,
#2d5986 11px 11px,
#2d5986 12px 12px,
#2d5986 13px 13px,
#2d5986 14px 14px;
}
.shadow:before, .shadow:after {
content: "";
position: absolute;
right: 0px;
bottom: 15px;
z-index: 1;
transform-origin: bottom right;
}
.shadow:before {
height: 40px; /* increased height */
width: 100%;
left: 0px;
transform: skewX(45deg);
box-shadow: 1px 40px 0px 0px #2d5986; /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
width: 10px; increased width
height: 100%;
top: 25px;
transform: skewY(45deg);
box-shadow: 10px 0px #2d5986;
} */
<div>
<span class="shadow">
A
</span>
</div>
<div>
<span class="shadow">
a
</span>
<span class="shadow">
b
</span>
</div>
<div>
<span class="shadow">
A B
</span>
</div>
<div>
<span class="shadow">
A B C
</span>
</div>
The main problem is the fact that we are now working with text-shadow instead of box-shadow, and as such the :before and :after pseudo classes don't work (although I attempted to make them work by attaching them to the <span>... and then made the width: 100%).
If there was a way to set the width and height of the text-shadow itself (which is achieved on a box-shadow by using the :before and :after pseudo classes), I feel this would be a piece of cake; however, all my research has not found how to do this for a text-shadow.
Does anyone know a way to make a flat long shadow for text with minimal CSS - potentially by somehow changing the width and height of the text-shadow?
Thank you.
Though this is no css-only answer, you might give it a try.
Basically, you create the according css in the browser via a short javascript snippet. The upside is, that it makes you very flexible - changing only two parameters instead of several tens of lines of css.
function addDropShadow(element,width,color){
let css = "";
for (var i = 1;i<width;i++){
css += `${color} ${i}px ${i}px,`;
}
css += `${color} ${width}px ${width}px`;
element && (element.style.textShadow = css);
}
let element = document.querySelector(".icon");
let color = "rgb(18, 128, 106)";
addDropShadow(element,15,color);
.container { padding: 50px; background: rgb(34,45,58); } .icon { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px;width: 150px; font-size: 75px;line-height: 150px; text-align: center; display: block; overflow: hidden; }
<div class="container"><div class="icon">YO</div></div>
I don't think there is a good CSS only approach.
The only posibility that I can think of is creating pseudos with the same text as the base, and use to reduce the amount of shadows to one third:
Notice that the pseudo itself counts as a shadow because it has the color changed to the color of the shadow
.sample {
font-size: 70px;
position: relative;
text-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red,
6px 6px red, 7px 7px red, 8px 8px red, 9px 9px red;
}
.sample:after, .sample:before {
content: attr(data-text);
z-index: -1;
color: red;
position: absolute;
}
.sample:after {
left: 10px;
top: 10px;
}
.sample:before {
left: 20px;
top: 20px;
}
<div class="sample" data-text="Sample">Sample</div>
Right, I have a header and a small div .sideShadow, I need .shideShadow div to be behind a #sideTopHeader div, right now it is on the top of it, you can see it here (to your right)
http://inelmo.com
CSS I use now
#sideTopHeader {
background: #333333;
z-index: 1;
position: relative;
height: 50px;
margin: 0 -30px 0 0;
-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;
}
.sideShadow {
border-color: transparent transparent transparent #1f1f1f;
border-width: 15px;
border-style: solid;
height: 0;
width: 0;
position: absolute;
top: 35px;
left: 395px;
z-index: 0;
}
#llya; put your .slidershow div outside of yours #sideTopHeader div instead of inside like this
HTML:
<div id="sideTopHeader"></div>
<div class="sideShadow"></div>
& position relative to it's parent . May be that's work for you
Without changing the markup: don't use a z-index on #sideTopHeader (BTW: why is this an ID? Is there really only one element inside the sidebar?) and set the z-index to -1 for .sideShadow.
But I really suggest, you'd better clean up your markup. You don't really need three nested DIV's for styling a single content-element. For example instead of having a nested div.sideShadow, you may use a pseduo-element for CSS-effects, like #sideTopHeader:after.