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>
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>
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>
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.
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.
Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)
HTML
<div id="header_organizer">
<div id="user_bar">...</div>
<div id="user_bar_menu">...</div>
<div id="logo_alt"> <!-- <<<<< We are centering this div! -->
<img src="logo.png" \>
</div>
</div>
CSS
#header_organizer {
width: 100%;
height: 180px;
background: black url(../images/template/header.png);
float: left;
position: relative;
z-index: 1000;
}
#logo_alt {
width: 256px;
height: 55px;
margin: 40px auto 0px auto;
}
#user_bar {
height: 30px;
color: #CCC;
font-size: 13px;
margin-right: 10px;
padding: 0px 5px;
float: right;
cursor: pointer;
position: relative;
z-index: 3000;
}
#user_bar_menu {
width: 200px;
height: 165px;
background: white;
border: 1px solid #BEBEBE;
float: right;
position: absolute;
top: 30px;
right: 10px;
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
display: none;
z-index: 1000;
border-image: initial;
}
The HTML file start off with <html xmlns="http://www.w3.org/1999/xhtml">.
Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.
Firstly, add a doctype to prevent IE from slipping into quirks more.
Then try this...
body {
width: 100%;
}