I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
Related
When creating a span element that has a linear background, and no border, everything works fine.
But as soon as I add a border, the colors from the gradient become solid and just sit on the edges.
Increasing the border size mitigates the issue, but I have found no way to completely remove the problem without increasing the border width or removing the border.
CSS for the element:
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
i can't simulate it, so, my suggestion is to change from border to box-shadow: check the snippet below:
span{
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border-radius: 3px;
padding: 3px;
font-size: 50px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
}
.border{
border: 3px solid black;
}
.box-shadow{
box-shadow: 0px 0px 0px 3px black;
}
<span class="border">My Contributions</span>
<br/> <br />
<span class="box-shadow">My Contributions</span>
The starting and ending points of the gradient are at the edges of the padding-box and border. That's why as soon as you add a border, the colors from the gradient become solid and just sit on the edges.
Using box-shadow:inset will fix the issue. See the updated CSS below.
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
box-shadow: inset 0 0 0 3px black;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px
1px black;
How can I make a rectangle with long shadow like the image below using CSS?
Use this way:
#rectangle {
width: 150px;
height: 250px;
border: 2px solid black;
box-shadow: 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black,
6px 6px black,
7px 7px black,
8px 8px black,
9px 9px black,
10px 10px black;
}
<div id="rectangle"></div>
there.
Have you tried anything yet?
You can use a div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div and you can use box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - but you might need many many box shadows to get that smooth edge. Good luck!
example using linear-gradient
.box_volume {
width: 200px;
height: 300px;
background: linear-gradient(to top, #FFD700, #F0E68C);
box-shadow:
1px 0px rgb(320,163,35), 1px 1px rgb(192,167,7),
2px 1px rgb(319,162,34), 2px 2px rgb(191,166,6),
3px 2px rgb(318,161,33), 3px 3px rgb(190,165,5),
4px 3px rgb(317,160,32), 4px 4px rgb(189,164,4),
5px 4px rgb(316,159,31), 5px 5px rgb(188,163,3),
6px 5px rgb(315,158,30), 6px 6px rgb(187,162,2),
7px 6px rgb(314,157,29), 7px 7px rgb(186,161,1),
8px 7px rgb(313,156,28), 8px 8px rgb(185,160,0),
9px 8px rgb(312,155,27), 9px 9px rgb(184,159,0);
}
<div class="box_volume">
</div>
I have font called MyriadPro-BoldIt, I used that on photoshop to create a text design like below.
I tried to add this style using css by adding below codes to the same font which I converted to web fonts before
-webkit-text-stroke: 1px black;
color: white;
text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
but it is not giving same results. Anyone knows how to create this kind of letters using css?
I was able to do something like this.
h1 {
font-size: 100px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
-1px 1px 0 #fff, 3px 3px 5px #333;
}
See demo
Here is a demo that works well: http://jsfiddle.net/XLRbQ/
-webkit-text-fill-color: black;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: white;
text-shadow: 5px 5px 5px #000;
And also a tutorial CSS-Tricks: http://css-tricks.com/adding-stroke-to-web-text/
have you tried simply:
color: black;
text-shadow:
2px 2px 0 white,
3px 3px 0 gray;
you have to tune coordonates and font-size in order to have something looking fine.
http://codepen.io/gc-nomade/pen/rnmdv/
Does anyone know how to get the exact box shadow that appears on the bottom of the fixed position navbar on pinterest.com?
http://pinterest.com/
You might have used any developer tool (Chrome DevTools or Firebug) to find this out:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
Looking at the sites CSS styling in Chrome I got this segment of code for that bar:
#CategoriesBar {
position: absolute;
z-index: 101;
top: 44px;
right: 0;
left: 0;
text-align: center;
font-size: 13px;
color: #8C7E7E;
background-color: #FAF7F7;
border-top: 1px solid #CFCACA;
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
}
These 3 lines should help you out on your style:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
If you look at http://keepskatinbro.com in Chrome, you'll notice that after you hover on titles that there will be artifacts left behind on the sides of the titles after you un-hover.
I got the idea from http://desandro.com (look at the bottom of the page). But Desandro's has no artifacts.
Here's the HTML:
<h1 id="logo">
<a class="" id="home_link" href="http://keepskatinbro.com/" title="Keep Skatin' Bro" rel="home">
<span id="keep">KEEP</span><br>
<span id="skatin">SKATIN'</span><br>
<span id="bro">BRO</span>
</a>
</h1>
Here's the CSS:
#header{
margin-bottom:30px;
background:#FFF;
border-bottom:1px solid rgba(0,0,0,0.15);
}
#header h1 a{
color:#757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818;
/*-moz-text-shadow:2px 2px 2px rgba(0,0,0,1);*/
}
#header h1 a:hover{
color:#fff;
text-shadow: 1px 1px #58e, 2px 2px #58e, 3px 3px #58e, 4px 4px #58e, 5px 5px #58e, 6px 6px #58e, 7px 7px #58e, 8px 8px #58e, 9px 9px #58e, 10px 10px #58e, 11px 11px #58e;
}
Why might I have this problem? I've noticed it before when making other sites only in Chrome it seems... Yet Desandro doesn't have the artifacts on desandro.com.
Sorry cannot comment yet. Can you write your code down?
By the way, just try to change the mouseout with mouseleave event or viceversa.
EDIT
It seems a Chrome bad hover event handling (you can test it by leaving the logo gently).
Force a negative, transparent shadow when the link is not hover:
#header h1 a {
color: #757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818, -1px -1px transparent, -2px -2px transparent, -3px -3px transparent;
}