I have a down arrow created in CSS however I would like for it to be treated like a square. Currently, to trigger any of the hover effects, you need to hover over one of the lines. I would like to hover in between the lines to achieve the same effect but I can't think of anything that works.
Unfortunately I'm horrible when it comes to explaining problems so searching was difficult, so hopefully I can receive help here. I have a snippet below with my CSS.
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
}
Disclaimer: These values may require adjustments depending upon the usage.
This can be done by setting a padding for the element.
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
or combined padding: top right bottom left
padding: 50px 10px 10px 10px;
See the demo below:
.down:before {
transform: rotate(55deg) translateX(-20px);
}
.down:after {
transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
content: '';
background-color: #000;
display: block;
height: 2px;
width: 40px;
transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
background-color: #808080;
}
/* FOR VISIBILITY IN SNIPPET */
.down {
position: absolute;
top: 50px;
left: 50px;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
I'm trying to cross vertically the rotated square with a line created using pseudo-element.
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
transform:rotate(-45deg);
margin-left: 19px;
}
https://jsfiddle.net/npvfu3ff/
But the rotate rule is affecting the pseudo element making it difficult to position.
Here is an image of what I need:
Changed the way to do it, so that it will center automatically
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
margin-top: 30px;
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin: auto;
margin-top: 50%;
transform:rotate(-45deg) translatey(-50%);
transform-origin: top center;
}
<div class="marker"></div>
I detached marker line from rotation by using :before and :after for square and line, so they don't affect each other.
https://jsfiddle.net/wmqhd72u/
.maker2 {
position: relative;
}
.maker2:hover:before {
transform: rotate(405deg);
}
.maker2:before,
.maker2:after {
position: absolute;
}
.maker2:before {
display: block;
content: "";
width: 16px;
height: 16px;
border: solid 2px #896f56;
top: 0;
left: 0;
transform: rotate(45deg);
transition: all 2s;
}
.maker2:after {
content: "";
position: relative;
top: -8px;
left: -8px;
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin-left: 19px;
top: 8px;
left: -10px;
}
I've made my images purposely overlap each other vertically, but now the images have stacked on top of each other. How do I stop this from happening? Here is my site.
I tried adding a z-index to the images, which worked on a previous layout, but hasn't worked with this -
.home_post_box {
float: left;
width: auto;
height: auto;
margin-right: 356px;
margin-bottom: 30px;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
width: 371px;
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
position:absolute;
left:0px;
top:0px;
z-index:1;
padding-left: 0px;
}
May be this is close to what you try
.home_post_box {
float: left;
width: auto;
height: auto;
position: relative;
cursor: pointer;
display: inline-block;
}
.home_post_box img {
height: auto;
padding-bottom: 20px;
transform: -webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align: center;
left: 0px;
top: 0px;
z-index: 1;
padding-left: 0px;
float: left;
}
From what I could see, you should try encapsulating each row of pictures in its own <div> and put your desktop-clear or tablet-clear elements between those rows.
You might also use this clearfix trick for clearing, its a bit cleaner but I'm not sure what you're trying to do. Perhaps it will be useful.
How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
EDIT
Icon fonts are a great suggestion. I was looking for something like this.
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.
DEMO 1
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
DEMO 2 (With circle)
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: green;
border-radius: 11px;
left: 0;
top: 0;
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #fff;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_circle"></div>
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
Here is another CSS solution. It takes fewer lines of code.
ul li:before {
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li {
list-style-type: none;
font-size: 1em;
}
<ul>
<li>test1</li>
<li>test</li>
</ul>
Do some transforms with the letter L
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
only css, quite simple I find it:
.checkmark {
display: inline-block;
transform: rotate(45deg);
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
<div class="checkmark"></div>
You can now include web fonts and even shrink down the file size with just the glyphs you need.
https://github.com/fontello/fontello
http://fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders
It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform
Example
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
To do:
<ul>
<li class="done">Great stuff</li>
<li class="done">Easy stuff</li>
<li>Difficult stuff</li>
</ul>
I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.
Simple, semantic, without any dependencies or additional HTML.
label {
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
top: 2px;
box-sizing: content-box;
width: 14px;
height: 14px;
margin: 0 5px 0 0;
cursor: pointer;
-webkit-appearance: none;
border-radius: 2px;
background-color: #fff;
border: 1px solid #b7b7b7;
}
input[type="checkbox"]:before {
content: '';
display: block;
transition: transform 200ms;
}
input[type="checkbox"]:checked:before {
width: 4px;
height: 9px;
margin: 0px 4px;
border-bottom: 2px solid #115c80;
border-right: 2px solid #115c80;
transform: rotate(45deg);
}
<label>
<input type="checkbox" name="check-1" value="Label">Label
</label>
Try this
// html example
<span>✓</span>
// css example
span {
content: "\2713";
}
i like this way because you don't need to create two components just one.
.checkmark:after {
opacity: 1;
height: 4em;
width: 2em;
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 2em;
top: 4em;
position: absolute;
}
Animation from Scott Galloway Pen
$('#toggle').click(function() {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
});
body {
padding: 5em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
.circle-loader {
margin-bottom: 3.5em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out;
}
.checkmark {
display: none;
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: '';
left: 1.75em;
top: 3.5em;
position: absolute;
}
#keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 1.75em;
opacity: 1;
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>
li:before {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
li:after {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.
.snackbar_circle {
background-color: #f0f0f0;
border-radius: 13px;
padding: 0 5px;
}
.checkmark {
font-family: arial;
font-weight: bold;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
color: #63BA3D;
display: inline-block;
}
<span class="snackbar_circle">
<span class="checkmark">L</span>
</span>
I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.
Lists
ul {padding: 0;}
li {list-style: none}
li:before {
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
body {
font-size: 75%;
}
ul {
padding: 0;
}
li {
list-style: none
}
li:before {
display: inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
Checkboxes
You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :checked.
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
content:'';
display:inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked + label:before {
content: '✔';
color: green;
}
body {
font-size: 75%;
}
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked+label:before {
content: '';
display: inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height: 1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked+label:before {
content: '✔';
color: green;
}
<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>
You might want to try fontawesome.io
It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.
We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:
<span class="check_text">Some Text</span>
Now, we can add the CSS like this:
span.check_text:before {
position: absolute;
height: 15px;
width: 5px;
border-bottom: 3px solid red;
border-right: 3px solid red;
content: "";
transform: rotate(45deg);
left: -25px;
top: 2px;
}
If you want a tick, you probably also want a cross, with background colours.
.icon {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success { background: green; }
.icon.icon-success:before { width: 3px; height: 9px; top: 6px; left: 11px; }
.icon.icon-success:after { width: 3px; height: 3px; top: 12px; left: 8px; }
.icon.icon-failure { background: lightcoral; }
.icon.icon-failure::before { width: 3px; height: 12px; top: 5px; left: 10px; }
.icon.icon-failure::after { width: 12px; height: 3px; top: 10px; left: 5px; }
<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>
This is my variant for making 'checked' buttons
function clickMe(data) {
data.classList.add("checked");
}
.unchecked::before {
content: "C";
}
.unchecked {
border-radius: 50%;
outline: none;
}
.checked::before {
content: "L";
}
.checked {
background-color: green;
transform: rotate(45deg) scaleX(-1);
}
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>
Also, using the awesome font, you can use the following tag.
Simple and beautiful
With the possibility of changing the size and color and other features in CSS
See result:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>fa fa-check-circle</h1>
<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
This is simple css for Sign Mark.
ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}
I've got a styled checkbox where I want to have a link next to the label. The labels have different widths so I can't put the link relative to the left. Due to the styled checkbox I can't 'detect' the width of the label with css.
So to make it clear, in the jsfiddle I've made I want the link info to be to the left of the label.
http://jsfiddle.net/SAZ2P/3/
Cheers!
css:
.selectbox {
position: relative;
display: inline-block;
}
.selectbox input[type="checkbox"] {
visibility: hidden;
}
.selectbox label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background: #fcfff4;
border: 1px solid #000;
text-indent: 30px;
white-space: nowrap;
letter-spacing: 2px;
line-height: 17px;
}
.selectbox label:after {
opacity: 0;
content: '';
position: absolute;
width: 6px;
height: 4px;
background: transparent;
top: 2px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectbox label:hover::after {
opacity: 0.5;
}
.selectbox input[type=checkbox]:checked + label:after {
opacity: 1;
}
.selectbox a{
float: left;
}
I think it would be best to include the link inside of the label. For example:
<div class="selectbox">
<input type="checkbox" value="brand2" id="brand2" name="brand2" class="box">
<label for="brand2">info brand with longer name</label>
</div>