I have border around whole website and it works great,now how can I make it have rounded corners,I've tried :
border-radius: 25px
but it doesnt work,and heres the normal border code that works but I need it rounded :
.ct, .cb, .cr, .cl {
border-radius: 25px
background-color: #ffffff;
position: fixed;
z-index: 99999;
}
.ct {
border-radius: 25px
top: 0;
right: 0;
left: 0;
height: 20px;
}
.cr {
border-radius: 25px
top: 0;
right: 0;
bottom: 0;
width: 20px;
}
.cb {
border-radius: 25px
bottom: 0;
right: 0;
left: 0;
height: 20px;
}
.cl {
border-radius: 25px
top: 0;
left: 0;
bottom: 0;
width: 20px;
}
Thanks in advance
Instead of using div's as borders just use border: size type color;
https://jsfiddle.net/dcLbza26/
html {
height: 100vh;
border: 20px solid red;
border-radius: 25px;
}
Related
I'm creating my own custom product badges and noticed when I rotate -45deg and use before and after there is a space added in Firefox
I originally had the same problem in Chrome but adding transform: translateZ(0); was able to fix it. I tried negative margin and it made the before and after not look as wide as the div at the top.
.product-badge {
color: white;
background-color: #1978AB;
width: 92px;
height: 40px;
line-height: 40px;
top: 27px;
left: 0px;
transform: rotate(-45deg) translateZ(0);
position: absolute;
z-index: 0;
}
.product-badge:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
z-index: 0;
top: 0;
margin-right: 0;
right: 100%;
border-width: 0 0 40px 40px;
border-color: transparent transparent #1978AB transparent;
}
.product-badge:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
z-index: 0;
top: 0;
margin-left: 0;
left: 100%;
border-width: 40px 0 0 40px;
border-color: transparent transparent transparent #1978AB;
}
<div class="product-badge"></div>
JSFiddle link
I m trying to design a both and ribbon shape button on hover should show horizontal line and icon on both ends.
https://imgur.com/a/iYvJUzJ
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
Read More
Hope this will help you get some idea about how to do.
You can add any font icon to the after and before elements of the span inside the content.
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Read More<span></span>
I have this shape with pseudo elements:
https://jsfiddle.net/6gf1m3j5/
body {
margin: 0;
background:#ccc;
}
#octagon-left {
background: red none repeat scroll 0 0;
height: 60px;
width: 100%;
}
#octagon-left::before {
border-left: 100px solid white;
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
top: 0;
width: 40px;
}
#octagon-left::after {
border-right: 100px solid white;
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
width: 40px;
}
The problem here is the white color in the left and right corner.
If I do, border-left: 100px solid transparent; the color red is prevailing.
I want to like this:
How can I do that?
I really appreciate your support, thanks.
#octagon
{
background-color: red;
height: 60px;
margin: 0 auto;
position: relative;
width: calc(100% - 120px);
}
#octagon:before,
#octagon:after
{
background-color: red;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#octagon:before
{
transform: translateX(30px) skewX(-45deg);
}
#octagon:after
{
transform: translateX(-30px) skewX(45deg);
}
<div id="octagon"></div>
Change you code like so and let me know
body {
margin: 0;
background:#ccc;
}
#octagon-left {
background: red none repeat scroll 0 0;
height: 60px;
width: 100%;
}
#octagon-left::before {
border-left: 100px solid #ccc;/*Change from white to #ccc*/
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
top: 0;
width: 40px;
}
#octagon-left::after {
border-right: 100px solid #ccc;/*Change from white to #ccc*/
border-top: 60px solid red;
content: "";
height: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
width: 40px;
}
<div id="octagon-left">
</div>
I am working on a CSS only lightbox solution for my project. I've googled it but so far found only partial solutions.
I am looking for these features:
display content of any width and any height (no fixed height/width)
center verticaly and horizontaly
display scrollbars if content width and/or height overflows lightbox boundary due to viewport dimensions.
So far I have this:
.lb-overlay {
text-align: center;
background: #c0c0c0;
background: rgba(0,0,0,0.5);
border: #a0a0a0 solid 1px;
position: fixed;
left: 0;
top: 0; right: 0; bottom: 0;
z-index: 10000;
}
.lb-overlay:after {
content: '';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
background-color: #f00;
}
.lb-wrap {
display: inline-block;
vertical-align: middle;
position: relative;
background: #ffffff;
max-height: 90%;
max-width: 90%;
z-index: 10001;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
position: relative;
overflow: auto;
margin: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close {
position: absolute; right: 0; top: 0;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lb-close:hover { background-color: #f00000; }
http://jsfiddle.net/TomasReichmann/F4D5u/1/
problems:
vertical scrollbar doesn't appear
horizontal scrollbar works only in chrome
Ideally, I am looking for compatibility with modern browsers and IE8+, but I can live with IE9+
Can you guys help?
Get rid of the unnecessary sizing models
Full-size the overlay as width: 100%; height: 100%;
Use margin: auto and position: absolute; top: 0; left: 0; bottom: 0; right: 0; to center align the wrap within the overlay both vertically and horizontally
Use width and height instead of max-width and max-height
Use padding on wrap to control the border around the content
Use overflow: auto; width: 100%; height: 100%; in content
Summed up: http://jsfiddle.net/F4D5u/8/
Complete style code:
.lb-overlay {
background: #c0c0c0;
background: rgba(0,0,0,0.5);
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
z-index: 10000;
margin: 0;
width: 100%; height: 100%;
}
.lb-wrap {
margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
background: #ffffff;
width: 70%; height: 70%;
padding : 2em;
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
.lb-content {
overflow: auto;
width: 100%; height: 100%;
}
.lb-close {
position: absolute; right: 0px; top: 0px;
background-color: #d00000;
margin: 0;
color: #fff;
padding: 4px;
line-height: 1em;
width: 2em;
height: 2em;
border: 0;
outline: 0;
cursor: pointer;
}
.lb-close:hover { background-color: #f00000; }
I have a footer that contains 2 rows of 3 links - when the browser window is resized and goes too small, the links get cut off. Is there any way to keep the footer full size while the rest of the window gets resized?
.footer { position: fixed; top: 90%; left: 0; right: 0; bottom: 0;
background: #ffffff; border: solid black; border-width: 2px 0 0 0; }
set a "min-width" for your div
.footer {
position: fixed;
top: 90%;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
min-width: 200px;
}
Add a min-height to the footer, as shown in this fiddle:
.footer {
position: fixed;
height: 10%;
min-height: 40px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid black;
}
is fixing the footer to the bottom of the page an option? just delete the top: 90%; and the footer will retain it's height even when the window is half-sized
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
}
PS I forked your fiddle: http://jsfiddle.net/6s5eN/