I've fairly simple CSS code for my tabs. Problem is I'm adding this as part of larger CSS base and I keep getting it overwritten by defaults. For example I have a * { font-size: 8pt; } which forces itself into my new added CSS.
/*
#import url('https://fonts.googleapis.com/css?family=Roboto');
*/
/*
#import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/
/*
body {
font-family: 'Roboto', sans-serif;
}
*/
.tabsWrapper {
text-align: center;
margin: 50px auto;
font-family: 'Roboto', sans-serif !important;
}
.tabs {
font-family: 'Roboto', sans-serif !important;
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
/*
display: inline-block;
*/
/*
border-radius: 50px;
*/
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
display: none;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
/*
border-radius: 50px;
*/
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}```
/*
#import url('https://fonts.googleapis.com/css?family=Roboto');
*/
/*
#import url('https://use.fontawesome.com/releases/v5.7.2/css/all.css');
*/
/*
body {
font-family: 'Roboto', sans-serif;
}
*/
.tabsWrapper {
text-align: center;
margin: 50px auto;
font-family: 'Roboto', sans-serif !important;
}
.tabs {
font-family: 'Roboto', sans-serif !important;
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
/*
display: inline-block;
*/
/*
border-radius: 50px;
*/
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
display: none;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
/*
border-radius: 50px;
*/
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}
<body>
<div class="tabsWrapper">
<div class="tabs">
<div class="selector"></div>
<a href="javascript:void(0)" class="active" data-id="Tab-40w1lgn2"><i class="fas fa-bomb">Test
</i>
</a>
<a href="javascript:void(0)" data-id="Tab-w2mo0zn9"><i class="fas fa-bomb">Test5
</i>
</a>
</div>
</div>
</body>
My understanding was that if I add !Important for tabs CSS it would make sure that everything down of tabs gets that setting including A/I and so on. But it doesn't work. It only works if I move font-size down to A/I element which is not what I want. I would like to make sure that settings go down properly to the elements below. What is the easiest way?
The universal selector will be applied to each and every element. Even when the font-size is set on .tabs, the * will set font-size again on the a and i children.
If you want to have proper inheritance, use
body {
font-size: 8pt;
}
This will keep the 8pt size until an element defines another size.
Some more information here
Could it be because your include: #import url('https://fonts.googleapis.com/css?family=Roboto'); is commented out?
Related
I want to make the color of div darker on hover
I tried decrease the brightness using filter but this affect the text too
:root{
--Dark-cyan: hsl(158, 36%, 37%);
}
#submit{
background: var(--Dark-cyan);
text-align: center;
vertical-align: middle;
color: white;
font-weight: 700;
font-size: 14px;
width: fit-content;
height: fit-content;
padding: 15px 60px;
border-radius: 15px;
}
#submit:hover{
filter: brightness(50%);
}
<div id="submit"> Add to Cart</div>
this is the result that I want:
off hover
on hover
You can use backdrop-filter instead of filter :)
"Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent".
Unfortunately for firefox, this requires at this time: User must explicitly enable the feature
:root {
--Dark-cyan: hsl(158, 36%, 37%, 0.9);
}
#submit {
background: var(--Dark-cyan);
text-align: center;
vertical-align: middle;
color: white;
font-weight: 700;
font-size: 14px;
width: fit-content;
height: fit-content;
padding: 15px 60px;
border-radius: 15px;
}
#submit:hover {
backdrop-filter: brightness(50%);
}
<div id="submit"> Add to Cart</div>
You could use box-shadow: inset with a large spread-radius
it doesn't affect the text color
:root{
--Dark-cyan: hsl(158, 36%, 37%);
}
#submit{
background: var(--Dark-cyan);
text-align: center;
vertical-align: middle;
color: white;
font-weight: 700;
font-size: 14px;
width: fit-content;
height: fit-content;
padding: 15px 60px;
border-radius: 15px;
}
#submit:hover{
box-shadow: inset 0 0 0 /*spread-radius:*/ 100px #33333377;
}
<div id="submit"> Add to Cart</div>
Try this:
You can try reducing the alpha property from rgba()
Try like this:
.your-css-class:hover {
background: rgba(0, 0, 0, 0.25);
}
This can be done using the pseudo ::before and ::afer and some opacity on hover. Take a look at the snippet
:root { --Dark-cyan: hsl(158, 36%, 37%, 0.9) }
.btn, .btn::before, .btn::after { border-radius: 15px }
.btn {
color: white;
cursor: pointer;
display: inline-block;
font-size: 14px; font-weight: 700;
height: fit-content; width: fit-content;
padding: 15px 60px;
position: relative;
}
.btn::before, .btn::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: -1
}
.btn::before { background-color: black }
.btn::after { transition: opacity 360ms 0ms ease-in-out }
.btn:hover::after { opacity: 0.6 }
#submit::after { background-color: var(--Dark-cyan) }
#remove::after { background-color: red }
<div class="btn" id="submit">Add to Cart</div>
<div class="btn" id="remove">Remove from Cart</div>
I have a simple login page, which I wanted to beautify with some snow in the background. However this makes it unable for me to input anything into the input box, even if z-index is set to 100:
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
I know that the error lays in Snow.css, because if I don't use it, I can use my login normally, but I can't find anything wrong within the file
pointer-events is to be set on .snow only ;)
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
pointer-events: none;
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
or reset on the form.
/* CSS (Login) : */
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
pointer-events:auto
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #43A047;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #76b852;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
#333);
background: linear-gradient(to left, #76b852, /*#8DC26F*/
#333);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* CSS (Snow) : */
.background {
color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.winter-is-coming,
.snow {
z-index: -1;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: fixed;
top: 0;
height: 100%;
width: 100%;
max-width: initial;
background: #333;
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- large-075d267ecbc42e3564c8ed43516dd557.png');
background-size: contain;
}
.snow--near+.snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
background-size: contain;
}
.snow--mid+.snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow- small-1ecd03b1fce08c24e064ff8c0a72c519.png');
background-size: contain;
}
.snow--far+.snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
<div class="winter-is-coming login-page">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
<div class="form" style="z-index:100;">
<form class="login-form">
<h1>Login</h1>
<input type="text" placeholder="Username" id="usernameBox" />
<input type="password" placeholder="Password" id="passwordBox" />
<button runat="server" onclick="loginClicked">login</button>
</form>
</div>
</div>
I'm trying to replicate an example on Codepen on my own HTML files on my computer but it isn't rendering properly. the static layout looks the same as whats being rendered in codepen, but the background with the moving squares is not working when i'm putting it on my machine and files. Here's the codepen link im trying to use/replicate:
https://codepen.io/Lewitje/pen/BNNJjo
i can get the background color to show up & the login boxes to pop up, but i was really trying to replicate it so i could get the animated background.
Here's the code on my desktop that isn't working in my browser (i tried chrome and safari both):
As you will see the moving rectangles in the background don't show up.
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
#prim: #53e3a6;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
}
.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
h1{
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
}
form{
padding: 20px 0;
position: relative;
z-index: 2;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: #prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
li:nth-child(1){
left: 10%;
}
li:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
#-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
#keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<link href="styles/test.css" rel="stylesheet">
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
My issue was that i was trying to use the "less" code on CodePen when replicating the example. I needed to select the tab in the upper right area of Codepen to look at the full CSS code. #Gerard was able to bring me to this solution.
I'm trying to give the look of a gradient border to a button by creating a span inside the button and setting some padding difference between them.
It works pretty well on codepen, but when I pass it to my website, something happens and these tags suddenly stop being aligned.
However, which is the best way to set a span centralized inside a button in order to simulate a border?
body{
background:white;
text-align:center;
box-sizing:border-box;
font-family:"Lato",Sans-serif;
padding-top:5%;
/* position:relative; */
}
.btn:link,
.btn:visited{
text-decoration: none;
text-transform:uppercase;
position:relative;
top:0;
left:0;
padding:22px 2px;
border-radius:100px;
display:inline-block;
transition: all .5s;
}
.btn-white{
background-image:linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color:#000;
font-family: Lato;
font-size:1.3rem;
}
.btn span {
align-items: center;
background-color: #fff;
border-radius:100px;
display: absolute;
justify-content: center;
padding:20px 40px;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span {
background: transparent;
}
.btn:hover{
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
border: none;
box-shadow:0px 10px 10px rgba(0,0,0,0.2);
color: #fff;
transform : translateY(-3px);
}
.btn:active{
box-shadow:0px 5px 10px rgba(0,0,0,0.2)
transform:translateY(-1px);
}
.btn-bottom-animation-1{
animation:comeFromBottom 1s ease-out .8s;
}
.btn::after{
content:"";
text-decoration: none;
text-transform:uppercase;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:100px;
display:inline-block;
z-index:-1;
transition: all .5s;
}
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
<a class="btn" href="#">
<span>A brand new button!</span>
</a>
Well if it worked in Codepen and now doesn't its because your site is overriding something or you're not including the reset/normalize or vendor prefixing that Codepen is using by default.
Now you shouldn't need to do any "centering" to accomplish what I think you want.
Simply make the span a block level element and give it a margin or give the button padding.
button {
background-color: blue;
border: 2px solid darkBlue;
font-size: 14px;
padding: 4px;
}
button span {
display:block;
background: tan;
border:2px solid aqua;
padding: 10px 20px;
color: white;
}
<button>
<span>Text</span>
</button>
May be this is the solution that you intended to achieve. I have to edit a lot to your code to achieve that. Here is Codepen version
body {
background: white;
text-align: center;
box-sizing: border-box;
font-family: "Lato", Sans-serif;
padding-top: 5%;
/* position:relative; */
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
/* position: relative; */
/* top: 0; */
/* left: 0; */
padding: 10px;
/* this padding will be your gradient border */
border-radius: 100px;
display: inline-block;
transition: all .5s;
border: none;
}
.btn:hover {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
/* border: none; */
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
/* color: #fff; */
transform: translateY(-3px);
}
.btn span {
/* align-items: center; */
background-color: transparent;
/* background-color: #fff; */
border-radius: 100px;
/* display: absolute; */
/* justify-content: center; */
/* padding: 20px 40px; */
/* padding: 20px; */
/* height: 100%; */
/* transition: background .5s ease; */
transition: all .5s ease;
/* width: 100%; */
display: block;
padding: 20px 40px;
}
.btn:hover span {
/* background: transparent; */
background: #fff;
color: #ccc;
}
/* .btn-white {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color: #000;
font-family: Lato;
font-size: 1.3rem;
} */
/*
.btn:active {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.btn-bottom-animation-1 {
animation: comeFromBottom 1s ease-out .8s;
} */
/* .btn::after {
content: "";
text-decoration: none;
text-transform: uppercase;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100px;
display: inline-block;
z-index: -1;
transition: all .5s;
} */
/*
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
*/
<a class="btn" href="#">
<span>A brand new button!</span>
</a>
I'm trying to style this HTML page using the style used here
https://codepen.io/Lewitje/pen/BNNJjo
I have added the style reference and <div> tags.But the style is not properly applied.Please advice.
<html>
<head>
<title>User Validation</title>
<link href="newstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="container">
<!-- our form -->
<form id='userForm' class="form">
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<div id='response'></div>
</div>
<!-- where the response will be displayed -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#userForm').submit(function(){
// show that something is loading
$('#response').html("<b>Validating Email...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.post('test.php', $(this).serialize(), function(data){
// show the response
$('#response').html(data);
}).fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
</body>
</html>
StyleSheet
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
#prim: #53e3a6;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body{
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
::-webkit-input-placeholder { /* WebKit browsers */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
}
.wrapper{
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
overflow: hidden;
&.form-success{
.container{
h1{
transform: translateY(85px);
}
}
}
}
.container{
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
h1{
font-size: 40px;
transition-duration: 1s;
transition-timing-function: ease-in-put;
font-weight: 200;
}
}
form{
padding: 20px 0;
position: relative;
z-index: 2;
input{
display: block;
appearance: none;
outline: 0;
border: 1px solid fade(white, 40%);
background-color: fade(white, 20%);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
transition-duration: 0.25s;
font-weight: 300;
&:hover{
background-color: fade(white, 40%);
}
&:focus{
background-color: white;
width: 300px;
color: #prim;
}
}
button{
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #prim;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
transition-duration: 0.25s;
&:hover{
background-color: rgb(245, 247, 249);
}
}
}
.bg-bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
li{
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: fade(white, 15%);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
&:nth-child(1){
left: 10%;
}
&:nth-child(2){
left: 20%;
width: 80px;
height: 80px;
animation-delay: 2s;
animation-duration: 17s;
}
&:nth-child(3){
left: 25%;
animation-delay: 4s;
}
&:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-duration: 22s;
background-color: fade(white, 25%);
}
&:nth-child(5){
left: 70%;
}
&:nth-child(6){
left: 80%;
width: 120px;
height: 120px;
animation-delay: 3s;
background-color: fade(white, 20%);
}
&:nth-child(7){
left: 32%;
width: 160px;
height: 160px;
animation-delay: 7s;
}
&:nth-child(8){
left: 55%;
width: 20px;
height: 20px;
animation-delay: 15s;
animation-duration: 40s;
}
&:nth-child(9){
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 40s;
background-color: fade(white, 30%);
}
&:nth-child(10){
left: 90%;
width: 160px;
height: 160px;
animation-delay: 11s;
}
}
}
#-webkit-keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
#keyframes square {
0% { transform: translateY(0); }
100% { transform: translateY(-700px) rotate(600deg); }
}
There are two things you can try.
First, make sure that your HTML and CSS files are in same folder.
Second, your attached CSS file is a Less file and not compiled. You must select "View Compiled CSS" from your link of codepen and then copy it.
I hope it would help you