When applying transform:scale to my element, the border-colors get messed up. Would like to know if this is a known issue and has a solution? If I remove the scale the animation works fine and borders return to normal. I have also tried both ways, when scaling up and down the issue persists. Tried zoom, transform-origin, nothing seems to fix this weird issue. Also this has no issues in chrome.
JSfiddle
body {
background-color: lightblue;
}
.player-chromecast {
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: lightblue;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
top: 3px;
}
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
body {
background-color: #20262e;
}
h1 {
color: white;
text-align: center;
}
.player-chromecast:hover .reception {
border-bottom-color: transparent;
border-left-color: transparent;
}
p {
font-family: verdana;
font-size: 20px;
}
.player-chromecast {
border-left: 1px solid #fff !important;
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
border-bottom: 1px solid #fff !important;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: #20262e;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
border-left: 0px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
border-left: 0px;
top: 3px;
}
<!DOCTYPE html>
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
Please check now in firefox or any other browsers it working correctly i mean border is not there on hover .....Let me know if you still get same bugs
Related
I want to give border like this. Please check below code.
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -9px;
top: -8px;
width: 106%;
height: 125%;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
My problem is when content increases inside button border alignment also getting disturbed. Please give me solution on this.
No need complex calculation. Remove the width and consider right like your did with left. Same thing for height:
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
You need to combine dynamic and static values together width: calc(100% + 7px);
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
&:before {
content: "";
border: 4px solid red;
position: absolute;
left: -7px;
top: -6px;
width: calc(100% + 7px);
height: 111%;
border-radius: 30px;
}
}
Fiddle
Just add some padding to the border and adjust the top and left values to fit your font size.
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 16px;
color: #fff;
position: relative;
display: block;
margin-bottom: 10px;
&::before{
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
padding: 4px;
width: 100%;
height: 100%;
border-radius: 30px;
}
}
https://jsfiddle.net/d4cugr07/
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 3 years ago.
I am trying to create a button with chopped corner, the only challange is to make that corner transparent, instead of background color of that corner.
Attached the exmple I am trying to achieve
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 24px;
height: 24px;
background: #cccccc;
position: absolute;
right: -12px;
bottom: -12px;
transform: rotate(-132deg);
}
<div class="wrapper">
This is button
</div>
I believe that modifying the button's background - using linear-gradient from transparent to the specific color - is what you're looking for:
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
And in context:
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}
<div class="wrapper">
This is button
</div>
You can do something like this, I am in hurry so made this, You can change anything as per your need.
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 10px 16px 35px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 26px 0px 20px 20px;
border-color: transparent transparent transparent #07926D;
right: -20px;
top: 2px;
}
a.btn-border-tilt:before {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 0px 0 60px 30px;
border-color: transparent transparent transparent #07926D;
right: -4px;
top: -15px;
transform: rotate(90deg);
}
<div class="wrapper">
This is button
</div>
Check this with after and before and changes padding for text center
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 12px 16px 30px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:before {
content: "";
width: 18px;
height: 30px;
background: #07926D;
position: absolute;
right: -18px;
top: 0px;
}
.btn-border-tilt:after {
content: "";
width: 0;
height: 0;
position: absolute;
width: 0;
height: 0;
border-top: 18px solid #07926D;
border-right: 18px solid transparent;
right: -18px;
bottom: 0px;
}
<div class="wrapper">
This is button
</div>
Create a triangle at the bottom.
Reference: CSS Tricks
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #aaaaaa;
border-left-color: transparent;
border-top-color: transparent;
}
<div class="wrapper">
This is button
</div>
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
I'm a bit stuck on styling border around div box.
The problem is that I can't make borders not to be like:
Here is the real example what I have:
.num.num_1 {
border-left-color: #0D2431;
}
.num {
width: 60px;
height: 60px;
line-height: 50px;
border-width: 5px;
font-size: 40px;
}
.num {
float: left;
width: 40px;
height: 40px;
line-height: 36px;
text-align: center;
border: 2px solid #eee;
font-size: 20px;
color: #0D2431;
background-color: #fff;
}
div {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
}
<div class="num num_1">1</div>
.num.cheat:before {
content:"";
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
}
.num_1:before {
border-left: 5px solid black;
}
.num_2:before {
border-left: 5px solid black;
border-top: 5px solid black;
}
.num_3:before {
border-left: 5px solid black;
border-top: 5px solid black;
border-right: 5px solid black;
}
.num_4:before {
border-left: 5px solid black;
border-top: 5px solid black;
border-right: 5px solid black;
border-bottom: 5px solid black;
}
.num {
width: 60px;
height: 60px;
line-height: 50px;
border-width: 5px;
font-size: 40px;
position: relative;
margin-right: 10px;
}
.num {
float: left;
width: 40px;
height: 40px;
line-height: 36px;
text-align: center;
border: 5px solid #eee;
font-size: 20px;
color: #0D2431;
background-color: #fff;
}
div {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
}
<div class="num num_1 cheat">1</div>
<div class="num num_2 cheat">2</div>
<div class="num num_3 cheat">3</div>
<div class="num num_4 cheat">4</div>
I modified your css a little bit. I solved it using the :before pseudo element.
Better yet, you can use box-shadow to achieve this without any extra elements.
See: http://jsfiddle.net/w3b1uh7g/2/
.num {
border-left: 0px;
box-shadow: -5px 0 0 0 #0D2431;
}
You can do a weird series of nested divs:
.border {
background: green;
padding: 10px 10px 10px 0;
display: inline-block;
}
.border-left {
padding-left: 10px;
background: black;
display: inline-block;
}
.inside-box {
background: red;
height: 100px;
width: 100px;
}
<div class="border-left">
<div class="border">
<div class="inside-box">1</div>
</div>
</div>
Just add these to your css. the Pseudo Elements should make it square without adding extra divs in the HTML
.num.num_1:before {
content: "";
position: relative;
display: block;
top: -5px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}
.num.num_1:after {
content: "";
position: relative;
display: block;
bottom: 0px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.