I want make the popup windows like youtube share because its stick next to button. I tried bootstrap modal but it's popup in the middle of screen. When click youtube share button,pop up shows around button.
Does anyone know how to fix it?
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<div class="social-fuctions">
Share to facebook
</div>
</div>
</div>
</div>
css code
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
/*
.button {
font-size: 1em;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
*/HTMLHTML
.social-fuctions{
display: flex;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
/* transition: opacity 100ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
position: absolute;
bottom: -550px;
right: 5%;
left: 15%;
padding: 15px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Any suggestion? Thanks a lot
Set your box to position: relative and make the modal box / pop up a child of the box div. This way, the overlay will be positioned absolutely within the parameters of it's parent div.
.box {
position: relative;
}
.modal {
position: absolute;
}
Something like this:
https://jsfiddle.net/bommy8zu/5/
Moosetuin's approach is simple and effective.
But there is no need for a relative parent. And a absolute Modal.
I made two examples one is just like Youtube's ShareBox and the other will allways be centered.
How To Center:
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Check it out here: https://codepen.io/Tibixx/pen/zWEpqq
Is there any way to create an arrow like that in the following button, using CSS?
I know how to create triangle-like arrows like this
#triangle_arrow {
top: 3pt;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid black;
border-top: 0.1em solid black;
transform: rotate(45deg);
}
but that line towards the arrow's corner is confusing me!
Fortunately for you, the → HTML entity exists, meaning you don't need to faff around with CSS triangles and instead can simply use content within a pseudo-element:
button {
background: #0898b8;
border: 1px solid #0898b8;
color: white;
line-height: 24px;
padding: 6px 12px;
}
span::after {
content: '→';
font-size: 18px;
margin-left: 4px;
}
<button>
<span>Next</span>
</button>
Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using pseudo selectors or using pre-defined icons using font awesome to get an arrow icon next to some tag, as below.
Solution 1:
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box:before{
top: 20px;
right:10px;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid white;
border-top: 0.1em solid white;
transform: rotate(45deg);
position:absolute;
}
#box > p:after{
content:'';
width:20px;
height:1px;
background:white;
right:10px;
top:24px;
position:absolute;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
<div id="box">
<p>Next</p>
</div>
Solution 2 :
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
#box > p > .fa{
color:#fff;
font-size:16px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>
Resizeable CSS-only arrow.
https://codepen.io/ArtZ91/pen/jjbOvG
<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>
.css-arrow {
position: relative;
zoom: 1;
&:before {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1px;
bottom: 0;
width: 1px;
background: #000;
zoom: 2;
}
&:after {
box-sizing: content-box;
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 57%;
height: 0;
padding-bottom: 57%;
border: 1px solid #000;
border-width: 1px 0 0 1px;
transform: translate(0, 0) rotate(45deg);
transform-origin: 0% 0%;
border-radius: 0;
zoom: 2;
}
&.right {
transform: rotate(90deg);
}
&.bottom {
transform: rotate(180deg);
}
&.left {
transform: rotate(270deg);
}
}
I want to make background like in photo, but without image. I want with only "background-color" like background in "About us" link
You can achieve that using CSS transform: with value skew();
* {
margin: 0 auto;
padding: 0;
}
ul {
display: block;
width: auto;
margin-top: 60px;
background-color: blue;
height: 45px;
font-family: calibri;
font-weight: bold;
text-align: center;
}
li {
display: inline-block;
line-height: 45px;
padding: 0 25px 0 25px;
background-color: orange;
font-size: 24px;
transform: skew(20deg); /* To Achieve the Slanted border */
margin-right: -3px;
}
li a {
color: white;
display: block;
transform: skew(-20deg); /* To straighten up the text */
}
<ul>
<li><a href"#">About</a></li>
</ul>
Click here for a full tutorial on how you can do that.
It looks like you are looking for a parallellogram or rhombus. To do this you can use transform: skew
#about {
width: 120px;
height: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: blue;
color: white;
font-size: 20px;
padding-bottom: 5px;
text-align: center;
margin-left: 20px;
}
<div id="about">About us</div>
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 would like to reproduce the following logo, add a shadow below one letter as in the using only CSS.
How to do it as box-shadow overflow on both side of the letter ? I would prefer to avoid having an extra <span class="shadow"></span> following my "hovering" letter but manage it only with the letter tag/CSS rule (see HTML below).
N.B.: I'm aware of jQuery / CSS3 Animated shadow effect.
HTML
<span>Pr<span class="text-info">o</span>be</span>
CSS
element.style {
box-shadow: 0 4px 3px #AAAAAA;
position: relative;
top: -3px;
}
Using pseudo-elements (:before and :after), :hover and opacity properties, the solution looks like the following (it can be extended w/animation effects on opacity)
HTML
<div class="text-effects"><span>Pr<span class="text-info">o</span>be</span></div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
cursor:pointer;
}
.text-info:hover {
color: #008080;
bottom: 0.1em;
}
span.text-info:before {
content: ".";
color: transparent;
position: absolute;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom: 1em;
opacity:0;
}
span.text-info:after {
content: ".";
color: transparent;
position: absolute;
bottom: 0;
width: 40%;
box-shadow: 0 5px 4px -4px #303030;
display: block;
left: 30%;
bottom:0.15em;
opacity:0;
}
span.text-info:hover:before{
opacity:1;
}
span.text-info:hover:after{
opacity:1;
}
Technique
I had to use pseudo-element as described by #Alex Bell.
But instead of box-shadow I use text-shadow and tweak the pseudo-element position.
pseudo-element text is ˍ aka U+02CD MODIFIER LETTER LOW MACRON (ˍ or \u02CD)
Final result is available as a fiddle.
HTML
<div class="text-effects">
<span>Pr<span class="text-info">o</span>be</span>
</div>
CSS
body {
font-size: 10em;
font-family: Arial;
}
div.text-effects {
text-transform:uppercase;
}
span.text-info {
position: relative;
color: #008080;
bottom: 0.1em;
width: 1em;
height: 1em;
}
span.text-info:after {
bottom: 0.15em;
color: transparent;
content: "ˍ";
display: block;
font-size: 120px !important;
height: 1em;
left: 26%;
position: absolute;
text-shadow: 0 0 11px #999;
width: 1em;
}