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%);
...
}
Related
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>
UPDATE: I am wanting the text to be shown beneath the button, so when it fades away, it will be revealed where the button was.
How can i place text under (in the z axis) a button made with a a element so that when i hover over the button
it fades away and shows the text under?
I have tried using positioning to and position:absolute to make it so both text can be in one spot, but it wont seem to work
My button: http://jsfiddle.net/27bCK/
<div id="pricebar">
<a class="see" href="#">PRICING</a>
</div>
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
}
#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;
}
try this:
<div id="pricebar">
<a class="see" href="#">PRICING</a>
<div id="hidden">hidden text</div>
</div>
css:
#hidden{
text-align:center;
position:relative;
bottom:100px;
z-index:0;
border:0px solid red;
}
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
z-index:1;
}
#pricebar .see {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
position:relative;
z-index:3;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
line-height:175px;
background-color:#000;
margin-right:20px;
}
You could always try using jQuery to accomplish this. There may be an easier way but my mind is currently focused on jQuery. There is a class that allows you to add or remove something specific. Let's take a look at the jQuery added with this.
jQuery:
$('a').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('initialText', $this.text());
$this.text("I'm replaced!");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
EDIT: I replaced the add/remove of the classes to using a way where you cache the data you originally had into a variable and as you hover over it, it actually changes to the data you put inside of jQuery function and as you hover out, it will change it back. To be honest, I cannot take credit for this, because it was originally found in this Stack question, meaning, you should just go up vote that answer instead. But this should work with what you want to do.
The JSFIDDLE
If you want to do it with pure css, there are some changes to make. Get rid of the line height, set position on both .see and .show to absolute, set position of pricebar to relative, give the see and show a height and width, put the content for .show above the .see element in your html, and fiddle with a negative margin to line them up.
#pricebar {
width:100%;
height:175px;
background-color:#EAE5E5;
text-align:center;
position:relative;
}
#pricebar .see {
color:#fff;
font-size:50px;
margin-left:-15%;
background-color:#2ecc71;
border:5px solid #2ecc71;
border-radius:5px;
border-left:17px solid #2ecc71;
border-right:17px solid #2ecc71;
transition-duration: .3s;
transition-property: background-color, border, border-left, border-right, opacity;
position:absolute;
height:60px;
width:234px;
top:60px;
}
#pricebar .see:hover {
opacity:0;
background-color:#27ae60;
border:5px solid #27ae60;
border-left:17px solid #27ae60;
border-right:17px solid #27ae60;
}
#pricebar .show {
color:#fff;
font-size:50px;
background-color:#000;
height:60px;
top:60px;
margin-left:-40px;
position:absolute;
}
You can see it in this fiddle
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);
}
I was creating a portfolio, and I want it so that whenever someone hovers over my name, a bubble with an arrow appears. I've done that part already, but the problem is that the -webkit-transition property isn't working. The bubble is a little far to my name so I want it so that it takes a little bit of time to hide again, so someone can go to it easily because I'm thinking of making a form to contact me in it.
My HTML:
<div id="side-bar"><h1 id="ab_me">About Me</h1>
<img src="saksham.png" id="saksham">
<p id="name"><span>S</span>aksham <span>C</span>hauhan</p>
<div id="bubble">
SUP !
<div id="bubble-arrow-border">
</div>
<div id="bubble-arrow">
</div>
</div>
</div>
My CSS:
div#side-bar p
{
font-size:25;
border-bottom:2px solid red;
position:absolute;
left:10px;
color:#F63737;
}
div#side-bar p:hover
{
border-bottom:2px groove #C01F1F;
color:#C01F1F;
text-shadow:0px 1px 2px #F98378;
-webkit-transition:1s;
}
div#side-bar p span
{
font-size:40px;
}
div#side-bar p:hover ~ #bubble
{
display:block;
visibility:visible;
opacity:1;
-webkit-transition:5s;
}
div#side-bar p #bubble:hover
{
display:block;
visibility:visible;
opacity:1;
}
#bubble
{
background-color:#EDEDED;
visibility:hidden;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
z-index:100;
left:230px;
top:400px;
display:none;
-webkit-transition:5s;
opacity:0;
}
#bubble-arrow
{
border-color:transparent #EDEDED transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-28px;
z-index:100;
}
#bubble-arrow-border
{
border-color:transparent #666666 transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-31px;
}
When you are using a transition you must have both "before" and "after" states set (e.g. you cant transition from nothing to opacity:0 but you can from opacity:1 to opacity:0). Also, you can't have a transition on display but you can on visibility.
Here's some more about transitions: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
You have to tell it what properties to transition. It looks like you're trying to do this:
transition:all 1s ease;
-webkit-transition:all 1s ease;
Don't post your entire code, only relevant code.
CSS transitions don't work well with display:none. When I had to use display:none, I had to use Javascript to supplement my CSS.
So, if you remove display:none from #bubble, and then use:
-webkit-transition:all 1000ms;
On #bubble, and then have #bubble:hover set to change the opacity to 1:
opacity:1;
Your bubble will fade in, and then fade out.
http://jsfiddle.net/charlescarver/nrTMg/1/