i have a button with shadow around. The shadow is in an extra class.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
min-height: 100%;
}
body {
font-family: 'Anonymous Pro', monospace;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #C7DEFA;
position: relative;
}
.btn {
position: relative;
width: 66px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
right: -500px;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff, #fff, #F9FCFF);
z-index: 1;
filter: blur(1px);
}
.btn::after {
content: '';
position: absolute;
top: 0;
right: -1px;
width: 10px;
height: 100%;
background: #9CA6B1;
z-index: 1;
filter: blur(1px);
}
.btn-after {
position: relative;
width: 100%;
height: 100%;
border: none;
padding: 10px 25px;
outline: none;
background: linear-gradient(#D8E8FC, #B2C2D5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), 15px 15px 15px rgba(0, 0, 0, 0.1), 20px 20px 15px rgba(0, 0, 0, 0.1), 30px 30px 15px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #fff;
}
.shadow {
position: absolute;
top: 0;
left: -50px;
width: calc(100% + 50px);
height: 300px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent, transparent);
transform-origin: top;
transform: skew(45deg);
pointer-events: none;
}
.shadow::before {
content: '';
position: absolute;
width: 50px;
height: 50px;
background: #C7DEFA;
z-index: 1;
}
<body>
<div class="btn">
<div class="shadow"></div>
</div>
</body>
What I need help with is, to disable the .shadow class while btn:active. So there would be no shadow if the btn is clicked. It should look like a keyboard button with shadow when not clicked and without shadow when clicked.
Thx alot!
CSS is only for styling purpose and it cannot modify the document itself (elements, classes, etc.). If you do not want a certain style, you have to work around that - by putting more constraints to restrict the style to apply, for example, only when it is not clicked.
:not(:active) may be what you want. However, normal elements do not handle :active selector, and thus I changed the order of the element and used .btn-after:not(:active) + .shadow to apply shadow only when the link is not active.
See :active and Adjacent sibling combinator(+) for more info.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
min-height: 100%;
}
body {
font-family: 'Anonymous Pro', monospace;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #C7DEFA;
position: relative;
}
.btn {
position: relative;
width: 66px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff, #fff, #F9FCFF);
z-index: 1;
filter: blur(1px);
}
.btn::after {
content: '';
position: absolute;
top: 0;
right: -1px;
width: 10px;
height: 100%;
background: #9CA6B1;
z-index: 1;
filter: blur(1px);
}
.btn-after {
position: relative;
width: 100%;
height: 100%;
border: none;
padding: 10px 25px;
outline: none;
background: linear-gradient(#D8E8FC, #B2C2D5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1),
15px 15px 15px rgba(0, 0, 0, 0.1),
20px 20px 15px rgba(0, 0, 0, 0.1),
30px 30px 15px rgba(0, 0, 0, 0.1),
inset 1px 1px 2px #fff;
}
.btn-after:not(:active)+.shadow {
position: absolute;
top: 0;
left: -50px;
width: calc(100% + 50px);
height: 300px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1),
transparent, transparent);
transform-origin: top;
transform: skew(45deg);
pointer-events: none;
z-index: -2;
}
.btn-after:not(:active)+.shadow::before {
content: '';
position: absolute;
width: 50px;
height: 50px;
background: #C7DEFA;
z-index: -1;
}
<html>
<body>
<div class="btn">
<div class="shadow"></div>
</div>
</body>
</html>
Related
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
I added box shadows to the main shape but I can't get it to properply add to the ::before and :after triangles making up the polygon.
When I try to add box-shadow: 0 0 15px 1px #303030; to the form ::before and ::after it gives a shadow around the box containing the pesduo elements
Codepen
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid lightgreen;
position: absolute;
top: -20px;
left: 50%;
margin-left: -20px;
}
form::after {
content: '';
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 70px solid lightgreen;
position: absolute;
bottom: -70px;
left: 0;
}
input {
display: block;
width: 100%;
}
Please try maybe it will good for you -
<header>Header</header>
<form>
<label for="lastname">Lastname: </label>
<input type="text" id="lastname" />
<br><br>
<label for="firstname">Firstname: </label>
<input type="text" id="firstname" />
<br>
<br>
<input type="submit" value="Submit">
</form>
* {
box-sizing: border-box;
}
header {
height: 100px;
text-align:center;
line-height: 100px;
background-color: gold;
}
form {
box-shadow: 0 0 15px 1px #303030;
background-color: lightgreen;
margin: -10px auto;
padding: 20px;
width: 240px;
position: relative;
}
form::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 1px;
left: 50%;
margin-left: -30px;
border: 20px solid black;
border-color: lightgreen lightgreen transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.4);
}
form::after {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -170px;
left: 0;
border: 85px solid black;
border-color: transparent transparent lightgreen lightgreen;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
input {
display: block;
width: 100%;
}
Link to jsfiddle - http://jsfiddle.net/oj26aLmr/1/
Please refer to this image as a visual aid for my question.
I want the text input with "Sindre", the other input, and the buttons, to be placed higher, so they vertically align with the Icehotel logo. How can I do this?
Here's my code...
HTML
<div id="header-content">
<br>
<a href="/index">
<img draggable="false" src="{url}/app/tpl/skins/{skin}/images/logo.gif" style="position:relative; margin-left: 20px; <div align=; color: #FA0000;margin-top: 15px;margin-left: 180px">
</a>
<input id="username" name="log_username" placeholder="Username" style="position:relative; margin-left: 20px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="text">
<input id="password" name="log_password" placeholder="Password" style="position:relative;margin-left: 1px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="password">
<a href="{url}/api.php">
<button class="login green" name="login" style="height:34px;" type="submit">Let's go!</button>
</a>
<a>
<button class="login red" style="height:34px; margin-left: 4px" type="sumbit">Forgot your password?</button>
</a>
</div>
CSS
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr, img {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
#page {
margin: .5cm
}
p, h2, h3 {
orphans: 3;
widows: 3
}
h2, h3 {
page-break-after: avoid
}
}
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
color: #e0eff5;
background-attachment: fixed;
background-color: #013448;
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png');
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -webkit-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -moz-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #2D3877 480px);
, -ms-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
, radial-gradient(circle farthest-side at 190px 190px, #0297c8 0, #013448 480px);
min-height: 755px
}
i, cite, em, var, address, dfn {
font-style: italic;
}
body {
font-family: "Ubuntu Condensed", Arial, serif;
font-weight: normal;
min-height: 0;
}
#footer a {
color: #a1b5c8;
text-decoration: none;
font-size: 13px;
}
body {
font-size: 1em;
line-height: 1.4;
}
.form__input, .form__select {
box-shadow: inset 0 2px 0 0 #9ebecc;
line-height: 1.2;
padding: 5px 12px;
width: 100%;
font-size: 16px;
}
.button b, .new-button i {
position: absolute;
display: block;
left: 2px;
top: 3px;
right: 2px;
height: 9px;
background-color: #4a9fb4;
z-index: 0
}
.button:hover, .new-button:hover {
background-color: #418491
}
.button:hover b, .new-button:hover i {
background-color: #46a9bf
}
.button span, .new-button b {
position: relative;
z-index: 100
}
.button:active, .button-active, .new-button:active {
left: 1px;
top: 1px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.4)
}
.button.dimmed {
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .50
}
.button.large {
height: 100px;
background-color: #c78800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #5f4416
}
.button.large:hover {
background-color: #d99b00
}
.button.large:hover b {
background-color: #f7ce00
}
.button.large b {
left: 4px;
top: 4px;
right: 4px;
height: 48px;
background-color: #f0bb00;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0
}
.button.large span {
display: block;
font-size: 27px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 54px
}
.button.large span.sub {
display: block;
font-size: 17px;
font-weight: bold;
line-height: 42px;
text-transform: none
}
.button.large.not-so-large {
height: 48px
}
.button.large.not-so-large b {
height: 20px
}
.button.large.not-so-large span {
text-transform: none;
font-size: 22px;
line-height: 46px
}
header, footer {
width: 100%;
background: #101016;
background: rgba(16, 16, 22, 0.85);
position: fixed;
z-index: 999
}
#login-errors {
width: 100%;
height: 35px;
background-color: #c00;
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 35px
}
#login-errors a {
color: #000
}
#footer-content {
float: left;
margin-left: 50px
}
#footer-content.partner-logo-present {
margin-left: 20px
}
#footer {
width: 100%;
min-width: 780px;
margin-top: 19px
}
header {
top: 0;
min-height: 99px
}
header #border-left {
position: absolute;
width: 500px;
height: 1px;
left: 0;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
header #border-right {
position: absolute;
width: 100%;
height: 1px;
left: 220px;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
footer {
height: 69px;
bottom: 0;
border-top: 1px solid #7aa3b9
}
#top-bar-triangle, #top-bar-triangle-border {
position: absolute;
left: 163px;
bottom: -29px
}
#top-bar-triangle {
font-size: 0;
height: 0;
line-height: 0;
border-style: solid;
float: left;
margin: 0;
border-color: #101016 transparent;
border-color: rgba(16, 16, 22, 0.85) transparent;
border-width: 29px 29px 0 29px
}
#top-bar-triangle-border {
background-image: url('http://localhost/images/new_index/images/v3/top_bar_arrow_border.out.png');
width: 58px;
height: 29px
}
header #habbo-logo {
position: absolute;
width: 190px;
height: 52px;
background-image: url('http://localhost/app/tpl/skins/aura/images/logo.png');
left: 32px;
top: 27px
}
#login-form-container {
position: relative
}
header form {
position: relative;
left: 239px;
top: 0;
width: 740px;
height: 99px
}
#login-columns {
position: relative
}
header form.captcha {
height: 200px
}
header form.captcha #login-recaptcha {
height: 103px;
margin-top: 8px
}
#login-recaptcha .field-error, #login-recaptcha #captcha-overlay {
display: none
}
#login-column-1 {
position: absolute;
left: 0;
top: 11px;
width: 205px;
height: 70px
}
#login-column-2 {
position: absolute;
left: 214px;
top: 11px;
width: 134px;
height: 70px
}
#login-column-3 {
position: absolute;
left: 358px;
top: 32px;
width: 205px;
height: 55px
}
Set vertical-align: middle; on the inputs and remove the margin-top from the inline styles in the logo <img> tag.
While I'm at this, though...General cleanup of this code is probably a good idea. I would like to caution you to avoid mixing inline styles and CSS. Also, the <br> tag should probably be replaced with padding - that line break and the inline styles are there only for design purposes and design is handled in CSS. Keeping as much design out of the HTML will help you (or someone else) easily make changes to this site later, if needed. The <img> tag's styles also include two margin-left values. I would remove one to avoid confusion. Lastly, I think you will want to remove <div align=; from the <img> tag's styles. As far as I know, this doesn't accomplish anything.
Hope that helps!
how can I make this effect of the inner side of the lines?This is the menu bar I am trying to make: http://i.stack.imgur.com/Mvuer.jpg I cant do the effect between the lines. This is my code: https://jsfiddle.net/ivailo/3q6ej7cc/4/
.button {
position: relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
border-radius: 7px;
}
.button::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
color #fffff;
display: block;
content: '';
width: 15em;
height: 15em;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0s;
}
.button:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99, .2);
}
.button:hover {
color: #000000;
}
.button1 {
position: relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
border-radius: 7px;
}
.button1::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
content: '';
width: 15em;
height: 15em;
transform: translate(-50%, -50%);
transition: all 0s;
}
.button1:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99, .2);
}
.button1:hover {
color: #000000;
}
.theborder {
text-align: center;
width: 600px;
padding: 20px 25px;
}
.theborder:after {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
}
.theborder:before {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
}
Step 1: The inner glow
You can achieve this effect by using a variant of the curved drop-shadow trick. That trick is explained here:
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
But instead of putting the shadow behind, we can:
make it white
leave it in front
set overflow: hidden on the menu to hide the parts of the "shadow" we don't want to see.
This produces the interior glow effect that you want.
BODY {
background-color: tan;
}
.menu {
background-color: tan;
width: 500px;
height: 60px;
position: relative;
overflow: hidden;
}
.menu::before {
content: "";
position: absolute;
top: -50%;
bottom: 100%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 50px rgba(255,255,255,0.8);
}
.menu::after {
content: "";
position: absolute;
top: 100%;
bottom: -50%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 40px rgba(255,255,255,0.7);
}
<div class="menu">
</div>
You can see more clearly how it works if you remove the overflow: hidden from the menu rule.
Step 2: The fading top border
To make this we can just add a new <div> element at the top that is 1px height and has a CSS gradient background.
The final result:
BODY {
background-color: tan;
}
.menu {
background-color: tan;
width: 500px;
height: 60px;
position: relative;
overflow: hidden;
}
.menu::before {
content: "";
position: absolute;
top: -50%;
bottom: 100%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 50px rgba(255,255,255,0.8);
}
.menu::after {
content: "";
position: absolute;
top: 100%;
bottom: -50%;
left: 10%;
right: 10%;
border-radius: 50% / 30%;
box-shadow: 0 0 40px rgba(255,255,255,0.7);
}
.topborder {
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0) 100%);
}
<div class="menu">
<div class="topborder"></div>
</div>
Note: in both of the above examples I have simplified things by just using the unprefixed CSS properties. These should work on the latest Chrome and FF at least. But if you need to support older browser versions, you should add the prefixed versions of the CSS properties as well.
For example for the gradients, you might want to add -moz-linear-gradient and -webkit-linear-gradient, plus the fallback filter gradients for older versions of IE.
See: full version of this gradient