I have the text "+ Add" in a button. When I squish the button's width, I would like 'Add' to disappear but the '+' to remain. Normally I would say overflow: hidden; but from what I can tell because I have position: absolute; that won't work. Ultimately I will probably have to change it to position: relative; and mess with the layout, but can anyone tell my why this is?
.add_button{
display: inline-block;
font-family: 'EntypoRegular';
color:white;
font-size: 34px;
line-height: 1px;
overflow:hidden;
padding: 0px;
position: absolute;
box-shadow: rgb(1, 97, 253) 0px 0px 0px 1px inset, rgb(153, 191, 254) 0px 1px 1px 1px inset;
cursor: pointer;
overflow: hidden;
text-decoration: none solid rgb(255, 255, 255);
background: rgb(77, 144, 254) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 2px 2px 2px 2px;
outline: rgb(255, 255, 255) none 0px;
margin: 7px 0px;
width: 15%;
left: 39%;
}
Related
This is my website: https://zarmdev.github.io/To-doz/index.html
When I hover over the +, it doesn't overlap the panes (the squares with text).
I gave it and it's parent a z-index of 10 and the panes a z-index of 0.
CSS for the pane
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: 0; /* Z-index set here */
}
CSS for the dropdown
#dropdown {
position: relative;
display: inline-block;
z-index: 10;
}
#dropdown-content {
display: none;
position: absolute;
background-color: rgba(128, 128, 128, 0.534);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 8px 12px;
z-index: 10;
}
To see for yourself, first hover over the + button and press the other + button a few times.
When changing background color.
ALSO: When I try to hover on the other buttons, it disappears because it overlaps and thinks im hovering the pane.
Your #dropdown is partly transparent, that's why the stuff behind is visible: You defined background-color: rgba(128, 128, 128, 0.534); for it - the "0.534" value in there is the transparency value.
Change that value to avoid that.
Try change z-index property of your .pane class to value -1.
.pane {
background-color: rgb(192, 192, 192);
border: solid rgba(128, 128, 128, 0.463) 2px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 2vw;
font-family: 'Open Sans', sans-serif;
text-align: center;
border-radius: 2px;
width: 14ch;
height: 15ch;
mix-blend-mode: darken !important;
scrollbar-width: thin;
scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
background-size: cover;
background-repeat: no-repeat;
opacity: 0.7;
backdrop-filter: blur(30px);
z-index: -1; /* Z-index set here */
}
Check here a tuto with dinamic and online examples:
z-index tutorial and examples
as a complementary solution, in the screenshot it is seen that applying z-index -1 works
the solution with z-index: -1 worked for me
I have the CSS for the basic design of this rounded box. I have pasted that below. I'm trying to add a blue border with the following design effect (please see image below). Firstly is this possible? If so, any suggestions would be great..
I tried adding just a top border, but it doesn't quite give it the effect i'm looking for.
.contentbox {
border-style: solid;
border-width: 2px;
border-color: rgb(54, 81, 143);
border-radius: 10px;
background-color: rgb(255, 255, 255);
opacity: 0.2;
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
left: 190px;
top: 324px;
width: 100%;
height: 524px;
z-index: 118;
}
This Codepen uses different border widths to create a similar effect to what is pictured in the example.Good luck, and I hope this helps.
html, body {
perspective: 100px;
height: 100%;
width: 100%;
margin: 0;
}
div {
margin: 20px;
border-style: solid;
border-width: 4px 1px 1px 1px;
border-color: rgb(54, 81, 143);
border-top-color: blue;
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px -8px 0px 0px rgba(54, 81, 143, 0.03);
position: absolute;
width: 100px;
height: 100px;
}
<div></div>
I have a button created with css on a web application, when I test the button on chrome on android the button renders fine and stays on top of everything because of the z-index property:
But when I test the same thing on chrome on IOS it doesnt renders the button the way its supposed to be and doesnt respect the z-index property:
I tried to add "-webkit-appearance: none;" to the css but it didnt worked heres the css and html:
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 55.5px;
left: 0px;
letter-spacing: 0.5px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
top: 0px;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 27.75px 27.75px;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>
You may use flexbox to make them align horizontally and vertically center. Here's the code.
#PINPOINT {
-webkit-appearance: none;
width: 70px;
height: 70px;
margin: 15px auto;
position: relative;
z-index: 5000;
}
#BUTTON {
-webkit-appearance: none;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.870588);
height: 70px;
text-align: left;
width: 70px;
column-rule-color: rgba(0, 0, 0, 0.870588);
perspective-origin: 227.828px 35px;
transform-origin: 227.828px 35px;
border: 0px none rgba(0, 0, 0, 0.870588);
font: normal normal normal normal 14px / 21px Roboto, sans-serif;
outline: rgba(0, 0, 0, 0.870588) none 0px;
position: fixed;
right: 0;
}
#TEXT {
-webkit-appearance: none;
box-shadow: rgba(0, 0, 0, 0.156863) 0px 2px 5px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 10px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
height: 55.5px;
letter-spacing: 0.5px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 55.5px;
will-change: opacity, transform;
z-index: 1;
transform-origin: 27.75px 27.75px;
background: rgb(239, 83, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 50% 50% 50% 50%;
font: normal normal normal normal 14px / 56px Roboto, sans-serif;
margin: 0px 0px 14px;
outline: rgb(255, 255, 255) none 0px;
overflow: hidden;
transition: all 0.3s ease-out 0s;
/*Use flexbox property to fix this.*/
display: flex;
justify-content: center;
align-items:center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div id="PINPOINT">
<div id="BUTTON">
<i class="fa fa-reply" aria-hidden="true"></i>
</div>
</div>
I made a horizontal progress bar that does not have a problem with it
But the progress bar's vertical lines are not correct.
I put a picture of the problem.
jsfiddle.net/post98/juGXZ/1/
HTML
<body>
<div class="progress-bar horizontale">
<div class="inner"><span>|||||||</span></div>
</div>
<div class="progress-bar verticale">
<div class="inner"><span>___ ___ ___ ___ ___</span></div>
</div>
</body>
CSS
body {
background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}
.progress-bar.verticale {
width: 24px;
height: 300px;
/*border: 1px solid #060707;*/
margin: 10px auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
transform: rotate(180deg);
display: inline-block;
}
.progress-bar.horizontale {
width: 300px;
height: 24px;
/*border: 1px solid #060707;*/
margin: auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
display: inline-block;
}
.progress-bar.horizontale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 24px;
width: 200px;
}
.progress-bar.horizontale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/40px sans-serif ;
letter-spacing: -6px;
height: 24px;
opacity: 0.06;
overflow: hidden;
transform: skewX(-30deg);
}
.progress-bar.verticale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 200px;
width: 24px;
}
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 20px/30px sans-serif ;
letter-spacing: -6px;
height: 200px;
width: 20px;
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
}
Here the Picture
You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀
A demo.
Edit:
ASCII code of the character: 223 (Top half block).
You can thicken the lines like this:
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar.
letter-spacing: -6px;
height: 200px;
width: 25px; //change width to fit width of div.
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
margin:0px 0px 0px 0px;
bottom: 35px; //Position revision to justify font resizing.
}
Im creating a ribbon using css. the page it is on is FOUND HERE
I know the rest of my page needs more work but right this second I am focusing on the ribbon.
I need it to be auto 90% and center no matter what the screen size. at the moment it is cut off on the left a little and not center.
my css code:
.ribbon {
width: 90%;
position: absolute;
text-align: center;
font-size: 15px!important;
background: #2cdb1c;
background: -webkit-gradient(linear, left top, left bottom, from(#2cdb1c), to(#618028));
background: -webkit-linear-gradient(top, #2cdb1c, #618028);
background: -moz-linear-gradient(top, #2cdb1c, #618028);
background: -ms-linear-gradient(top, #2cdb1c, #618028);
background: -o-linear-gradient(top, #2cdb1c, #618028);
background-image: -ms-linear-gradient(top, #2cdb1c 0%, #618028 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 23px!important;
color: #000000;
text-shadow: #b9c9b5 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #379c27;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #000000 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
Can someone please help me? thank you.
It can't be positioned as absolute. Remove that. Make sure its parent has 100% width and then set margin:0 auto;
You could put your entire ribbon inside a divide. Then instead of centering the ribbon just give it a width of 100%.
ribbon_divide {
margin: 0 auto;
width: 90%;
}
You should wrap ribbon element and set width=100% for ribbon.
.ribbon-wrapper {
position: relative;
width: 90%;
margin: 0 auto;
}
.ribbon {
width: 100%
}
<div class="ribbon-wrapper">
<!-- Your ribbon html code -->
</div>
Just wrap your ribbon with a div.
<div style="width:90%;margin:0 auto;">
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Xclo.mobi</h1></strong><div class="ribbon-stitches-bottom"></div></div>
</div>
You could actually center it based on percentage and absolutely:
.ribbon {
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
}