So I've created part of a ribbon menu I plan on using myself. So here is what it looks like so far:
Before hover:
On hover:
Basically, I want it to show my social icon as well as being able to use my other banners when i add them in.
Here is the code that I am using so far:
<body>
<ul class="social">
<li class="ribbon" media="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></li>
</ul>
<script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>
Here is the CSS:
#import 'reset';
#import 'mixins';
ul.social {
position: absolute;
z-index: 4;
margin: -225px auto;
list-style: none;
right: 0;
li.ribbon {
float: right;
cursor: pointer;
position: relative;
width: 75px;
height: 250px;
border: none;
color: white;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
#include transition(all .2s ease-in-out);
#include filter(drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5)));
span {
line-height: 20px;
font-size: 5em;
}
}
li.ribbon:hover {
margin-top: 70px;
color: white;
}
li.ribbon:before {
content: '';
position: absolute;
top: 100%; left: 0;
width: 0; height: 0;
border-top: 25px solid blue;
border-right: 50px solid transparent;
}
li.ribbon:after {
content: '';
position: absolute;
top: 100%; right: 0;
width: 0; height: 0;
border-top: 25px solid blue;
border-left: 50px solid transparent;
}
li.ribbon[media="facebook"] {
background: #3b5998;
color: #1e2e4f;
margin-right: 5px;
}
li.ribbon[media="facebook"]:before,
li.ribbon[media="facebook"]:after {
border-top-color: #3b5998;
}
}
Note that the reset is just an eric meyer reset and the mixins are just for transitions etc...
The reason why you weren't able to see the icon was because there was a negative margin of 225px on the ul. On hover, only the margin-top of the li was being set to 70px but the ul still has the negative margin, so the li is still around 155px above the viewport. This means that the a which is not positioned (that is, has static positioning) and is near the top of the li is still not visible.
You can correct this by avoiding the margin on the ul and just moving the li around. I've used the transform: translateY() to move the li around because that is better for performance than using margins (which need repainting).
I have also added some extra properties like text-align, line-height etc for a better look.
ul.social {
position: absolute;
z-index: 4;
margin: 0px auto; /* modified */
list-style: none;
right: 0;
}
ul.social li.ribbon {
float: right;
cursor: pointer;
position: relative;
width: 75px;
height: 100px; /* modified */
border: none;
color: white;
padding: 5px;
text-align: center; /* added */
line-height: 100px; /* added, equal to height */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transform: translateY(-100%); /* added */
transition: all .2s ease-in-out;
-webkit-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
}
ul.social li.ribbon span {
line-height: 20px;
font-size: 5em;
}
ul.social li.ribbon:hover {
transform: translateY(0%); /* added */
/* margin-top: 70px; removed for better performance */
}
ul.social li.ribbon:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-top: 25px solid blue;
border-right: 50px solid transparent;
}
ul.social li.ribbon:after {
content: '';
position: absolute;
top: 100%;
right: 0;
width: 0;
height: 0;
border-top: 25px solid blue;
border-left: 50px solid transparent;
}
ul.social li.ribbon[media="facebook"] {
background: #3b5998;
color: #1e2e4f;
margin-right: 5px;
}
ul.social li.ribbon[media="facebook"]:before,
ul.social li.ribbon[media="facebook"]:after {
border-top-color: #3b5998;
}
/* added */
ul.social li.ribbon a {
color: white;
}
<body>
<ul class="social">
<li class="ribbon" media="facebook"><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
</ul>
<script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>
Related
I'm working on Bookmarklet. After removing not-important parts, I have bottom docking draggable window and I want to add resizing. I will probably do this by hand (using mouse down/move/up), but I want to know why resize: both property doesn't work.
I have code like this:
<div class="shell-wrapper docking">
<div class="shell-container">
<nav>
<span class="shell-dock"></span>
<span class="shell-destroy">[x]</span>
</nav>
</div>
<div class="shell-mask"></div>
</div>
.shell-wrapper nav {
cursor: row-resize;
color: #ccc;
border-bottom: 1px solid #ccc;
font-family: monospace;
text-align: right;
background: black;
font-size: 13px;
line-height: initial;
margin: 0;
width: 100%;
height: auto;
display: block;
}
.shell-container {
position: fixed;
background: black;
z-index: 99999;
bottom: 0;
left: 0;
right: 0;
height: 150px;
}
.shell-wrapper .shell-destroy {
padding: 5px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper .shell-mask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 100
}
.shell-wrapper.drag .shell-mask {
display: block;
}
.shell-wrapper .shell-dock,
.shell-wrapper .shell-destroy {
padding: 5px 3px;
cursor: pointer;
display: inline-block;
}
.shell-wrapper.docking nav {
cursor: default;
}
.shell-wrapper .shell-dock::before {
content: "[■]";
}
.shell-wrapper.docking .shell-dock::before {
content: "[_]";
}
.shell-wrapper.docking .shell-container {
bottom: auto;
right: auto;
top: calc(var(--top, 0) * 1px);
left: calc(var(--left, 0) * 1px);
width: calc(var(--width, 500) * 1px);
height: calc(var(--height, 400) * 1px);
box-shadow: 1px 1px 10px 2px rgb(0 0 0 / 30%);
resize: both; /* this have no effect */
}
You can check the Demo on CodePen.
The code uses jQuery but the question is not related. The problem is in CSS.
I'm trying to create a continue button that shows a right pointing arrow in a hover state. I also want the arrow to be centered.
I've tried adding .icon-arrow-right:before {content: "&rarr";}
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "#";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I would like the arrow to be to the right of the button text in a hover state. I would also like the arrow to be centered with the button text.
Make your pseudo element into the triangle you desire:
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
This uses the awesome transparent border trick to make the element box appear as a triangle. Change the border widths to alter the size of the triangle, notice the border with color is twice as wide as the transparent sides. You can play with these values to nuance the triangle how you like.
I also changed how you are positioning the text in the button:
.btn {
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
border: 3px solid #fff;
}
By using line-height this way you can guarantee your text will be vertically centered in the button at any font-size.
Check out the full working example:
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I have vertically centered the arrow with top:50%;transform:translateY(-50%);. I removed the line-height and height CSS from the .btn pseudo element because they weren't needed. I have just used > for the arrow, but you can use something like fontawesome to get a nice icon.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
font-size: 125%;
color: #fff;
transition: all 0.3s;
left: 130%;
top:50%;
transform:translateY(-50%);
}
.icon-arrow-right:before {
content: ">";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
Just expanding on #BugsArePeopleToo 's answer, using borders ans transforms to keep the ">" shape the OP wanted.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "";
width: 0.5em;
height: 0.5em;
position:absolute;
top:50%;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I'm trying to get this result :
And here is what I have for now (I'm only trying to get the result on the left element for the moment) :
I am trying to have this left arrow transparent but I can't find how to do that.
CSS Code :
.main_container .photo_container .mask a {
color: #FFFFFF;
font-size: 25px;
position: relative;
}
.main_container .photo_container .mask a:first-child {
border: 1px solid #FFFFFF;
padding: 5px 11px 7px;
}
.main_container .photo_container .mask a:first-child::before {
border-bottom: 7px solid transparent;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
content: "";
display: inline-block;
left: -8px;
position: absolute;
top: 20px;
}
.main_container .photo_container .mask a:first-child::after {
border-bottom: 24px solid transparent;
border-right: 25px solid #eee;
border-top: 24px solid transparent;
content: "";
display: inline-block;
left: -26px;
position: absolute;
top: -1px;
}
HTML Code :
<div class="photo_container">
<img src="images/placeholder/car1.png" class="img-responsive" alt="" />
<div class="mask">
<i class="fa fa-search"></i>
<i class="fa fa-link"></i>
</div>
</div>
Can you help me?
If you don't mind using transform this is pretty simple:
Making a pseudo element after the existing one, centering it on the correct side, and rotating it by 45 degrees.
The 70.71% figure is gotten using s = q / sqrt(2) where s is the side of a square, and q is the diagonal.
.arrow
{
border: 1px white;
border-style: solid solid solid none;
position: relative;
width: 50px;
height: 50px;
}
.arrow::after
{
content: "";
display: block;
top: 50%;
left: 0;
position: absolute;
border: 1px white;
border-style: none none solid solid;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
Finally, we can change what borders are shown, and the absolute positioning to make the arrow appear on the desired side:
body
{
background-color: black;
padding: 50px;
}
.arrow_left,
.arrow_right
{
display: inline-block; /* just to get them next to eachother */
border: 1px white;
position: relative;
width: 50px;
height: 50px;
}
.arrow_left { border-style: solid solid solid none; }
.arrow_right { border-style: solid none solid solid; }
.arrow_left::after,
.arrow_right::after
{
content: "";
display: block;
top: 50%;
position: absolute;
border: 1px white;
width: 70.71%; /* the side of a square is 70.71% the length of it's diagonal */
height: 70.71%;
transform: translate(-50%, -50%) rotate(45deg);
}
.arrow_left::after
{
left: 0;
border-style: none none solid solid;
}
.arrow_right::after
{
left: 100%;
border-style: solid solid none none;
}
<div class="arrow_left"></div>
<div class="arrow_right"></div>
The left 'arrow' cannot be transparent, because in reality it is just a solid border applied to 1/4 of a box.
(See this article explaining how the css triangle effect is achieved.)
You will either need to use images, or tweak the graphic design.
You tried use border to achieve transparent triangle. It doesn't work. So let's think about other way to implement what we want.
I created simple demo - any triangle is made by 2 lines (simple trigonometry knowledge needed.)
http://codepen.io/anon/pen/PPbxEQ - i used some variables in css, so in that case i used stylus - more prefer read the source code, not just compiled result.
We create a pseudo element for first icon. Rotate it and evaluate new height. Than change transform-origin. Easy.
We change the angle - and recalculate the cos(angle);
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("http://7-themes.com/data_images/out/2/6775415-beautiful-images.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.Icons {
width: 50vmin;
height: 25vmin;
display: flex;
}
.Icon {
flex: 1;
border-color: currentColor;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(2vw + 2vh + 4vmin);
color: #fff;
position: relative;
}
.Icon + .Icon {
margin-left: -1px;
}
.Icon:first-of-type {
border-width: 1px 1px 1px 0;
}
.Icon:last-of-type {
border-width: 1px 0 1px 1px;
}
.Icon:first-of-type:before,
.Icon:first-of-type:after,
.Icon:last-of-type:before,
.Icon:last-of-type:after {
content: '';
position: absolute;
margin: auto;
color: inherit;
background-color: currentColor;
width: 1px;
height: calc(50% / 0.866025404); /* Our angle is 30deg, so formula is calc(50% / cos(angle)) */
}
.Icon:first-of-type:before,
.Icon:first-of-type:after {
left: 0;
}
.Icon:first-of-type:before {
top: 0;
transform: rotateZ(30deg);
transform-origin: top;
}
.Icon:first-of-type:after {
bottom: 0;
transform: rotateZ(-30deg);
transform-origin: bottom;
}
.Icon:last-of-type:before,
.Icon:last-of-type:after {
right: 0;
}
.Icon:last-of-type:before {
top: 0;
transform: rotateZ(-30deg);
transform-origin: top;
}
.Icon:last-of-type:after {
bottom: 0;
transform: rotateZ(30deg);
transform-origin: bottom;
}
<div class="Icons">
<div class="Icon">I</div>
<div class="Icon">O</div>
</div>
Rather than Is it possible to always show up/down arrows for input "number"?, I want to be able to make up/down arrow much bigger and cleaner.
What I have right now:
I need to make them bigger like this:
you can wrap a input in and element and style it
div {
display: inline-block;
position: Relative;
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div:before,
div:after {
background: white;
right: 0px;
width: 30px;
height: 20%;
position: absolute;
pointer-events: none;
}
div:before {
content: '';
bottom: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
background-position: center;
}
div:after {
content: '';
top: 50%;
background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
background-size: 20px;
transform: rotate(180deg);
background-position: center;
}
input {
height: 80PX;
font-size: 50px;
outline: 0;
border: 0;
}
<div>
<input type="number" value="10" />
</div>
well, to achieve that you have to play with pseudo elements and some CSS3 tricks.
to create triangle https://css-tricks.com/snippets/css/css-triangle/
to manipulate input number spinners
input[type=number]::-webkit-inner-spin-button {
/* your code*/
}
here is the example.
input {
color: #777;
width: 2em;
font-size: 2em;
border-radius: 10px;
border: 2px solid #ccc;
padding: 5px;
padding-left: 10px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor: pointer;
display: block;
width: 10px;
text-align: center;
position: relative;
background: transparent;
}
input[type=number]::-webkit-inner-spin-button::before,
input[type=number]::-webkit-inner-spin-button::after {
content: "";
position: absolute;
right: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid #777;
}
input[type=number]::-webkit-inner-spin-button::before {
top: 7px;
}
input[type=number]::-webkit-inner-spin-button::after {
bottom: 7px;
transform: rotate(180deg);
}
<input type="number" value="1">
Another solution, offering uniformity between browsers and more customisation options, would be to use the JQuery UI spinner element.
I want to achieve the following shapes using pure CSS, no images.
I've come to the following point.
Here is the HTML structure:
<div class="sixteen columns">
<div id="applicationStatus">
<ul>
<li class="applicationStatus">Application Received</li>
<li class="applicationStatusGood">Language Exam</li>
<li class="applicationStatusNoGood">Oral Exam</li>
<li class="applicationStatus">Grant</li>
</ul>
</div>
</div>
And here is the CSS:
#applicationStatus {
position: relative;
width: auto;
height: 140px;
left: 40px; }
ul.applicationStatus {
list-style: none; }
li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
margin-right: 30px;
margin-left: 30px;
padding: 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
/* vertical-align: middle; */ }
li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #767676;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px; }
li.applicationStatus:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0px;
border-top: 80px solid transparent;
border-left: 30px solid white;
border-bottom: 80px solid transparent;
margin: -10px 0px 0 0px; }
li.applicationStatus:first-child, li.applicationStatusGood:first-child, li.applicationStatusNoGood:first-child {
margin-left: 0px;
text-indent: 30px; }
li.applicationStatus:last-child, li.applicationStatusGood:last-child, li.applicationStatusNoGood:last-child {
border-top: 0px solid transparent;
border-left: 0px solid transparent;
border-bottom: 0px solid transparent; }
li.applicationStatusGood {
background-color: #77a942; }
li.applicationStatusGood:after {
border-left: 30px solid #77a942; }
li.applicationStatusNoGood {
background-color: #c42c00; }
li.applicationStatusNoGood:after {
border-left: 30px solid #c42c00; }
Why doesn't the :before selector apply to all of the shapes or all in all how can I achieve what I want?
Modification of Your Code
The main issue you faced was not having position: relative on your li elements. But there were other things that needed tweaking too.
Here is a fiddle example to see.
I added the class you failed to reference in your HTML above to the ul element, so here is the HTML:
<div class="sixteen columns">
<div id="applicationStatus">
<ul class="applicationStatus">
<li class="applicationStatus">Application Received</li>
<li class="applicationStatusGood">Language Exam</li>
<li class="applicationStatusNoGood">Oral Exam</li>
<li class="applicationStatus">Grant</li>
</ul>
</div>
</div>
Then I modified your CSS a bit to condense it (could be more condensed if CSS3 only was being supported):
#applicationStatus {
position: relative;
width: auto;
height: 140px;
left: 40px; }
.applicationStatus li { /* Added this and moved much code to here */
position: relative; /* this was a key property missing from your code */
text-indent: 30px;
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
/* margin-right: 30px; Eliminated this */
margin-left: 30px;
padding: 10px 10px 10px 30px; /* tweaked this */
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
}
ul.applicationStatus { /* this was irrelevant with the HTML you gave, but I added the class to the ul */
list-style: none; }
/* tweaked various things below here */
li.applicationStatus:first-child:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #767676;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px;
}
li.applicationStatus:last-child:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 80px solid transparent;
border-left: 30px solid white;
border-bottom: 80px solid transparent;
margin: -10px 0px 0 0px;
}
li.applicationStatus:first-child {
padding-left: 10px;
margin-left: 0;
}
li.applicationStatus:last-child {
padding-right: 30px;
}
li.applicationStatusGood {
background-color: #77a942; }
li.applicationStatusGood:after {
border-left: 30px solid #77a942; }
li.applicationStatusNoGood {
background-color: #c42c00; }
li.applicationStatusNoGood:after {
border-left: 30px solid #c42c00; }
U can try this website.
http://cssarrowplease.com/
.arrow_box {
position: relative;
background: #88b7d5;
border: 8px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
top: 50%;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 41px;
top: 50%;
margin-top: -41px;
}