I'm looking for gradient or shadow effect (I don't know which exactly) like:
thank you for help.
Here is an idea using gradient and border to approximate it, simply adjust the color as you need:
.button {
display:inline-block;
padding:10px 20px;
background:linear-gradient(#ffa797,#e95648);
box-shadow:0px 1px 2px 2px #ccc;
position:relative;
color:#fff;
z-index:0;
}
.button:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
border-right:15px solid rgba(255,255,255,0.4);
border-left:15px solid rgba(0,0,0,0.5);
border-top:19px solid rgba(255,255,255,0.2);
border-bottom:19px solid rgba(0,0,0,0.2);
}
<div class="button">some text</div>
Related
can anyone figure out why this isn't displaying properly in IE 9? Here's what it looks like:
and here's what it
should look like:
Here's my code -- any help would be much appreciated. Thank you!
html
<div class="addl-colors-container">
<span class="addl-colors">
::before
"Multiple Options""
::after
</span>
</div>
CSS
.addl-colors-container{
width:105px;
height:105px;
position:absolute;
z-index:1;
text-align:center;
pointer-events:none;
margin:-10px;
font-size:14px;
}
span.addl-colors {
background:linear-gradient(#25aeca 0%, #5fc8c2 100%);
box-shadow:0 3px 10px -5px rgba(0, 0, 0, 1);
top:20px;
line-height:22px;
width:147px;
right:-16px;
transform:rotate(-37deg);
-ms-transform:rotate(-37deg);
-webkit-transform:rotate(-37deg);
display:block;
position:absolute;
color:#fff;
border-top-right-radius:75px;
border-top-left-radius:75px;
}
span.addl-colors:after{
content:'';
position:absolute;
left:0px;
top:100%;
z-index:-1;
border-left:3px solid #25aeca;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-top:3px solid #25aeca;
}
span.addl-colors:before{
content:'';
position:absolute;
right:0%;
top:100%;
z-index:-1px;
border-right:3px solid #25aeca;
border-left:3px solid transparent;
border-bottom:3px solid transparent;
border-top:3px solid #25aeca;
}
This is displayed inside another box. It was a lot of code so I didn't paste it but if it's needed, please let me know and I will post. Thank you!
unfortunately linear-gradient not found in internet explorer, I had the same problem and y solv putting a simple background before the linear gradient
like this:
span.addl-colors {
background: #25aeca;
background:linear-gradient(#25aeca 0%, #5fc8c2 100%);
...
}
I've made a "triangle" using CSS using the code outlined HERE
(jsFiddle example)
It works great, but I would like to have an inset shadow on the triangle and bar like this:
How?
HTML:
<div id="wrapper">
<div class="triLeft"></div>
<div class="triAngle"></div>
</div>
CSS:
.triLeft{
width:40px;
background:#fff;
margin:0;
float:left;
height:200px;
}
.triAngle{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px;
border-color: transparent transparent transparent #ffffff;
float:left;
margin-top:20px;
}
#wrapper{
height:200px;
background:brown;
}
you could try it another way, without borders but transform:rotate();
http://codepen.io/anon/pen/MymQMK
div.trgl {
position:relative;
margin:2em;
overflow:hidden;
}
div.trgl:after {
content:'';
position:absolute;
height:40px;
width:40px;
top:2em;
left:-20px;
background:white;
box-shadow: inset 0 0 5px black ;
transform:rotate(45deg);
}
div.trgl div{
position:relative;
min-height:200px;
padding:1em;
box-shadow: 0 0 5px black;
margin:3px;
background:lightgray;
}
<div class="trgl">
<div>
</div>
</div>
Here is what is happening:
CSS:
.speech-box {
height:76px;
width:220px;
padding:6px 10px;
background-image: linear-gradient(#4f4f4f,#000);
}
.speech-box:before {
content:'';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #4f4f4f;
position:relative;
left:-15px;
top:-3px;
}
And my HTML:
<div class="speech-box">
<span class="speech"></span>
</div>
And here is a fiddle: http://jsfiddle.net/xqy4dLbc/
I'm guessing the problem is with my HTML?
You need to add
display:block;
or
display:inline-block;
to .speech-box:before :
DEMO
The default display property of pseudo-element is inline (see MDN) and you can't set height on inline elements. Therefore the height:0; you set doesn't apply.
I tried to create a circle which border should look same color as div color and a space between the border and div. The in between space should show the background color of what ever div it is on. the background color is changeable so we shouldn't hardcode it.
Instead i have given transparency using rgba mode. All work fine am trying to get this effect on hover of the circle but i couldn't able to get the hover because i'm trying to display:block on hover and in normal state it is display:none; This are for the after selector hence i tried this effect with after selector.
CODE
CSS
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover + .main:after{
display:block;
}
.main:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:3px;
left:3px;
display:none;
}
body{
background-color:#888;
}
HTML
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
PROBLEM STATE
ON HOVER it should become like THIS with effects if possible
If there is any tutorial to do this i'll happy to learn. Thanks
set position:relative; to the .main and set left/right/top/bottom of the .main:after to zero and add transition:all ease 0.3s for animating.
in the .main:hover:after change left/right/top/bottom to -5px.
demo
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
position:relative;
margin:6px;
}
.main:after{
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:-1;
top:0px;
left:0;
bottom:0;
right:0;
transition:all ease 0.3s;
}
.main:hover:after{
top:-5px;
bottom:-5px;
right:-5px;
left:-5px;
}
Just add .main:hover:after to display it as block on hover WORKING FIDDLE
.main:hover:after{
display:block;
}
Try something like this
CSS :
.main{
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover:after{
width:86px;
height:86px;
border-radius:100%;
background:rgba(255,255,255,0.1);
border:2px solid #007eff;
position:absolute;
content:"";
z-index:111;
top:3px;
left:3px;
}
body{
background-color:#888;
}
HTML :
<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>
FIDDLE
you could use box-shadow instead pseudo-element :
http://jsfiddle.net/Ku6BQ/24/
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
}
.main:hover {
box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
background-color:#888;
}
If you it it transparent and show behind a gradient or an image, you may still use box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/
.main {
width:80px;
height:80px;
border-radius:100%;
box-shadow:inset 0 0 0 100px #007eff;
text-align:center;
line-height:80px;
}
.main:hover {
border:4px transparent solid;
margin:-4px;
box-shadow: 0 0 0 2px #007eff,
inset 0 0 0 100px #007eff;;
}
html {
background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;
}
An improvement (just for the record) on he idea of a box shadow as apported by GCyrillus
.main {
width:80px;
height:80px;
border-radius:100%;
background-color:#007eff;
text-align:center;
line-height:80px;
border: solid 4px transparent;
background-clip: padding-box;
box-shadow: 0 0 0 0px white;
-webkit-transition: all 1s;
transition: all 1s;
}
.main:hover {
box-shadow: 0 0 0 6px #007eff;
}
body {
background-color:#888;
}
fiddle
Is it possible to do a CSS border within a border?
Here is what I'm trying to do: screenshot
I would like to avoid extra html elements and also avoid using images because of retina devices. If only I could put a CSS outline on only one side of the element I would be golden, but this doesn't seem to be possible.
Edit:
Here's what I've ended up with from the many excellent solutions that were posted - thank you!
http://jsfiddle.net/kisabelle/9umMr/1/
HTML
<footer>
<p>Example</p>
</footer>
CSS
footer{
border-top: 15px solid #393734;
position: relative;
}
footer:after{
content:"";
border-top: 2px #989593 dotted;
position:absolute;
top: -8px;
left:0;
width:100%;
height:0;
}
Using the pseudo-element :after to add a second border (instead of box-shadow) allows support in IE8 and up.
See the jsfiddle for a second example in which you can control the space between the dots in the dotted border using the CSS content attribute instead of a border.
A couple of options:
Use border + outline
Use pseudo elements
Use multiple box-shadows
Use border-image
Googling any of those brings up loads of resources
Now that I've seen the screen grab, I reckon a combination of border top plus some box-shadows is your answer: http://jsfiddle.net/ne9nm/
Edit: Update the JSFiddle to show two possible solutions; one using box-shadows, and one using a pseudo element.
The HTML:
<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>
The CSS:
div {
background:rgb(100, 150, 100);
width:100px;
height:100px;
padding:30px;
margin:20px;
}
#example-1 {
border-top:1px white dotted;
box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
}
#example-2 {
border-top:10px solid grey;
position:relative;
}
#example-2:before {
content:"";
position:absolute;
width:100%;
height:0;
border-top:1px white dotted;
top:-5px;
left:0;
}
you can use box-shadow from css with inset and :after or before like this
Demo :http://jsfiddle.net/uXpaX/1/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
figure:after{
position:absolute;
top:-2px;
left:0;
height:1px;
width:100%;
content:'';
border-top:4px dashed white;
}
Or you can just use box-shadow and border
Demo:http://jsfiddle.net/uXpaX/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
html
<figure>
<figcaption>Coustomer Care</figcaption>
<menu type=list>
<li>Billing</li>
<li>Shipping & Tracking</li>
<li>Returns & Exchanges</li>
<li>Products & Sizing</li>
<li>Contact</li>
</menu>
</figure>
or use an other box-shadow trick like this
Demo:http://jsfiddle.net/uXpaX/2/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: black;
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black,inset 0 100em rgb(140, 179, 140);
}