I have the following issue:
I don't understand why if the input[type="submit"] style is deleted it keeps having 220px?
CSS code:
#popup_btn {
margin:0 15px 0 0;;
width:50px;
height:40px;
padding: 0;
}
Other CSS file:
.button, input[type="button"], input[type="reset"], input[type="submit"] {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
border: medium none;
border-radius: 0 !important;
box-shadow: none !important;
color: #fff;
font-size: 0.875rem;
font-weight: 700;
min-width: 220px;
padding: 1rem;
text-align: center;
text-shadow: none !important;
text-transform: uppercase;
transition: all 0.3s ease 0s;
width: 100%;
}
Maybe the wordpress does some stuff to it, but I can't understand...
It might be because you also have min-width set to 220px. Among, no matter what you say the width to, it won't be smaller than 220px. The solution might be to set width: 50px; min-width: 50px; wherever you want your element to be 50px
Related
Is there a way, with css, to properly transition the border between two elements, while having a shared border (or some trick that simulates it)?
I am trying to get a situation like this (note: if there are any abhorrent wrong-doings in my css, please mention. I am not very experienced with css):
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
Where the double border in between is "solved" by applying a negative margin (perhaps an alternative would be better?).
The middle border should:
stay white, when switching mouse hover from one button to the other
go from black to white, if neither was hovered before
go from white to black, when the mouse leaves the entire area
But in the above case, there are two overlapping borders, and one element is always on top. Playing with the z-index fails, when moving the mouse from one button to the next (instantly goes black, then transitions back to white). Setting no transition time for e.g. the left border fails, when moving the mouse in from the outside (left border is instant, obviously).
It's likely something, that should be assisted by javascript, but all too often, there is some trick, to achieve the desired behavior anyways.
As a note, the buttons in reality are vue router-link (and targeted by a class). I don't think that's too important though, but maybe switching to a table, and using border-collapse, or something similar, may work (didn't on basic tests).
After you hovered 1st button, you need to change a left border color of the second button.
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
a:hover:first-child+a {
border-left-color: #ffffff;
border-radius: 0 0.12em 0.12em 0;
}
#container> :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
The solution would be to add a z-index to the :hover. I've also changed the negative margin to -0.2em.
z-index controls which elements show on top, setting it on :hover forces the element that receives the hover to appear on top (including its borders).
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.2em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
z-index: 999;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
I somehow managed to make the input box responsive but the button is not being aligned in center
here is the css code
.webdesigntuts-workshop button {
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 2px 0 #000;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
font-family: "Cabin", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 20px;
padding: 0 10px;
padding-bottom: 2px;
text-shadow: 0 -1px 0 #000;
display: inline-block;
width:100%;
max-width:120px;
float:center;
}
Here is the whole Codepen link
https://codepen.io/anon/pen/XZrqzZ
Your code is messy, to much, in fact. Yet, the problem is not the button, but the input. The margins in the input is pushing it out of the screen because you have the width to 100%. So, the input take 100% of the screen plus the margin, pushing it out of the layout intended.
Try this in your css:
.webdesigntuts-workshop input{
margin: 0; /* Put 0 */
width: 100%;
}
.webdesigntuts-workshop button {
margin: 0 auto; /* Add this */
}
Here's the demo: https://jsfiddle.net/krycLxb0/
The way this is set up is so that to create the illusion that the button is pressed, the padding of the outer container (.button) is changed, making the top padding more than the bottom. However, when this is activated, the other button seems to shrink down as well. Why does this happen, and how do I fix it?
Here's the source:
header {
letter-spacing: .04em;
font-weight: 900;
font-family: sans-serif;
}
.button {
padding: 4px;
padding-bottom: 12px;
border-radius: 6px;
display: inline-block;
transition: 300ms ease;
will-change: auto;
text-transform: uppercase;
text-align: center;
font-size: 14px;
text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.button span {
display: inline-block;
width: 10em;
padding: 1.2em;
border-radius: 2px;
background: #FF4A50;
}
.button:hover {
box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
}
.button:active {
transition: none;
padding-top: 12px;
padding-bottom: 4px;
}
.button--filled {
background: #BC2E56;
color: white;
}
.button--filled span {
background: #FF4A50;
}
.button--dark {
background: rgba(65, 57, 76, 0.6);
}
.button--dark span {
background: #FFF8F2;
}
<header>
<a class="button button--filled" href="#"><span>Get Started</span></a>
<a class="button button--dark" href="#"><span>Learn more</span></a>
</header>
Because your buttons are now vertical-align: baseline. Just add vertical-align: top; to your .button. See fiddle
I am trying to create a card UI at: https://codepen.io/sarimabbas/pen/qjZYvr
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: hidden;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: #000000;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
The problem I run into is that the left side of the card (which contains an image), can overflow onto the right. Instead of hiding this overflow, I would like to blend it into the div on the right, so that the text is not hidden and can be readable.
Would something like this be possible? I have tried to research combinations of floats, background image fades and divs but have been unsuccessful.
On a related note, what would be the steps needed to make such a card responsive?
I'm not sure I understand completely, but using the below code gives transparency allowing to see the text on top of the overflowed image. With a completely black background that's not an option.
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
With regard to responsiveness, I would go for a flexbox instead of floats and use percentages instead of pixels for width and height.
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
background: transparent;
position: static;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
}
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: visible;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>
There's a few approaches to this problem but the simplest I can think of is something like applying a gradient background to the right hand box and setting .book's background to be black. So something like the following (will need some polishing of course)
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
margin: auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
background: #000;
}
.book_left {
width: 35%;
height: 300px;
float: left;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
/* No need for relative or z-indexes if our layers are in order (later in markup = "higher" layer for position: static) */
}
.book_right {
width: 65%;
height: 300px;
float: left;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
/* Gradient that sits on left of right panel - black background has also been applied to .book so that if the image doesn't fit the width we won't end up with weird chunks of missing background */
/* Generated gradient via: http://colorzilla.com/gradient-editor/ then tweaked a little */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>
Making it responsive you could set a % width on .book and probably float it.
The caveat to my approach is that if the image doesn't overflow it will have a hard edge so it may look strange next to ones that don't do overflow. You could attack this by also setting a percentage width on the images but you'd need to be cautious of images with largely different proportions and ensure that they always cover the 300px height. Alternatively you could set the images as a background image on .book_left and set background-size: cover
I'd usually suggest in this instance to crop images to consistent proportions to avoid the need for fading the overflow as it'll make your life a lot easier in the long run.
An alternate approach to the fade that might be more consistent would be to relatively position .book_left then place an absolutely positioned div within it with a gradient background which is layered on top of the image so something like a div with the following properties added within .book_left
position: absolute;
right: 0;
z-index: 1;
width: 10px;
background: -moz-linear-gradient .....
This combined with an image that fills the container should give you a more consistent look if you want the fade there
I'm using Chrome and I'm getting these weird transparency squares on my nav.
We tell all of our users to use chrome because we are heavily reliant on HTML5 so other browsers don't really matter.
http://html5test.com/compare/browser/chrome-33/firefox-28/ie-11/safari-7.0.html
This happens when I mouse over and then mouse out on the element.
Any way to get rid of it? or do I just have to live with it until they fix it?
Less
/* Here? */
.transition() {
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
header.site-header {
background: url(http://imgur.com/UEhaqNil.jpg) center no-repeat;
background-color: #2e2e27;
background-size: 100%;
background-position: 100% 95%;
float: left;
width: 100%;
font-family: "Economica", "Open Sans", Arial, sans-serif;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 1); /* Here? */
padding: 50px 10px 10px;
.title-area {
color: rgba(255, 255, 255, 0.8); /* Here? */
float: left;
font-size: 38px;
padding: 16px 0 16px 30px;
h1 {
margin: -10px 0 0;
}
img {
height: 70px;
margin: 0 0 0 35px;
opacity: .8;
}
}
nav.nav-area {
display: block;
float: right;
margin: 80px 10px 0;
ul {
list-style-type: none;
li {
float: left;
margin: 5px;
a {
color: rgba(255, 255, 255, 0.9); /* Here? */
border-radius: 1px;
padding: 8px 10px;
font-weight: 300;
font-size: 22px;
text-transform: uppercase;
&:hover,
&:focus,
&.active {
background: #56BE8E;
color: white;
.transition(); /* Here? */
text-decoration: none;
}
}
}
}
}
}