Check out the Shopify login page and note the checkbox (it's green). I've been inspecting away but can't figure out how they're doing this. I did figure out the real checkbox is hidden behind this one (via float: left). But this thing is not an image. No idea how they pulled that off. Any CSS geniuses care to take a look?
As i understand it , they reduce the width and height of the real checkbox and used label:before pseudo element instead:
here is the code they used to create their custom checkbox :
.marketing-checkbox-label:before, .marketing-radio-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background-color: white;
border-radius: 4px;
border: 1px solid #e5e5e5;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-webkit-transition: border-color 150ms ease;
-moz-transition: border-color 150ms ease;
transition: border-color 150ms ease;
}
Related
Ok, so i have a little bit of a weird problem.
I have been working on a little website for a school project and i needed a panel of buttons on the side.
So i made some divs and made them link to my other pages and so on.
But then a weird problem came up. The area where i could click my divs was not confined to the area of the margin, but it went out to the full length of the page's horizontal axis, but not the vertical.
I have tried searching around for some kind of solution to this problem, but can't seem to find any. I have also tried to change the margin of my divs, but nothing seems to work.
This is the HTML code for my div and the link
<a href="main.html">
<div class="MenuTop">
<p id="MenuTextOn">Forside</p>
</div>
</a>
And this is the CSS code associated with that div element.
.MenuTop {
position: relative;
border-width: 3px;
border-style: solid;
border-color: black;
width: 70px;
height: 60px;
border-radius: 15px 30px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
margin: 15px;
It should be noted that i'm new to this, but understand the basic principles.
Thanks for helping in advance! :D
You don't need to put a div inside an a element, just style the a starting with a display:block (to have it as a div by default):
Let's also organise better the CSS
.MenuTop {
/* positioning */
position: relative;
/* box-model */
display: block;
width: 70px;
height: 60px;
margin: 15px;
border-width: 3px;
border-style: solid;
border-color: black;
/* style */
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
border-radius: 15px 30px;
opacity: 1;
/* effects */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Have a look here: https://jsfiddle.net/7063nkfg/
Read about inline and block elements in HTML - http://www.impressivewebs.com/difference-block-inline-css/
P.S.You don't need to put DIV and P tags into A, this will make your code difficult to read and undestand.
Make it all simplier, with styles:
html:
<div>
Text1
Text2
Text3
</div>
css:
a.menu {
display: block;
box-sizing: border-box;
padding: 15px;
width: 70px;
height: 60px;
/* other styles */
}
I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.
How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.
you can add a delay like this:
transition: box-shadow 300ms, padding 300ms 400ms;
The box-shadow transition will start on hover and last 300ms, and the padding will start after 400ms and again last 300ms.
.something {
background: blue;
color: white;
padding: 0px;
background-clip: context-box;
transition: box-shadow 300ms, padding 300ms 400ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 10px;
margin: 10px 0px;
}
<div class='something'>Something</div>
Article on CSS-Tricks
You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.
So, for instance:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
And CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).
You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/
EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.
When using #Duncan Beattie´s solution one property will override the other.
This should work:
transition: box-shadow 300ms linear, padding 300ms linear 400ms;
Syntax:
transition: [property] [duration] [timing-function] [delay], ... more property-transitions
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
So i have my image on my webpage. In my css code, i have a transition for a :hover (glow appears), which works fine, and i want to add a stroke on :active. Here's my code :
#bb
{
top: 55%;
left: 6%;
opacity: 0.85;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#bb:hover
{
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
}
my problems are the following : how do i get the stroke to appear around the image without moving it, and how do i get it to stay "active" without having to hold the click on the image?
You can use CSS box-sizing:border-box;. Write like this:
#bb:active
{
opacity: 1;
border: 10px solid rgba(87,87,87,0.8);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/4g6d9/
A border occupies space, so adding a border normally displaces an element. If you use the outline property instead of border, no displacement takes place—but the outline will appear on top of anything that would otherwise appear in the same place, i.e. may cover other content.
The meaning of :active has various interpretations in different browsers. To make specific things happen (as cross-browser as possible) on keyboard or mouse events, you need to use JavaScript.