Please find this css class to create simple uparrow downarrow left arrow and right arrow.
<html>
<style>
.left {border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.right {border-bottom: 10px solid transparent;
border-left: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.top{ border-color: black transparent transparent;
border-style: solid;
border-width: 11px 7px 10px;
float: left;}
.bottom {border-color: transparent transparent black !important;
border-style: solid;
border-width: 0 27px 19px 25px;
float: right;}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>
Class left means Leftward arrow.,
Any one please suggest me the better way of creating arrows using simple css
The solution you have presented in your question is the best one if you care about IE7 compatibility.
Yes, there are other ways to achieve the same thing.
For example, if you drop IE7 support, then you could apply these same styles to :before/ :after pseudo-elements and avoid cluttering your HTML.
You also have the option of using gradients to create triangles - example. However, this is one solution that won't even work in IE9, which is the current IE version.
css tricks may be browser/version limited.
You can also get icon images here:
http://www.iconarchive.com/search?q=arrow+up
Small ones here:
http://p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow
A css arrow can be created using this style. you need to set the width and height of the arrow.
div.left {
z-index: 2000;
width: 80px;
height: 80px;
border-top: 2px solid #ddd;
border-left: 2px solid rgba(150,150,150,0.4);
text-indent: -90000px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
also if you need a easier way then you can always switch to use images
Related
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is.
I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML on the page.
Example below.
You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.
Here is a working example
Suppose you have below as you html,
<div class="btn">
<button><div class="btn-text">Click</div></button>
</div>
If we skew the parent element by 20deg then we should skew the child element by -20deg as,
.btn {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
.btn-text {
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
padding: 20px;
}
You can simply accompish desired effect using CSS triangle tricks.
Just add some styles for the ::before and :: after pseudo-classes.
.skewed_button {
background: #32CD32;
color: #000;
text-decoration: none;
font-size: 20px;
display: inline-block;
height: 30px;
margin-left: 15px;
padding: 6px 10px 0;
}
.skewed_button::before {
content: "";
float: left;
margin: -6px 0 0 -25px;
border-left: 15px solid transparent;
border-bottom: 36px solid #32CD32;
height: 0px;
}
.skewed_button::after {
content: "";
float: right;
margin: -6px -25px 0 0 ;
border-left: 15px solid #32CD32;
border-bottom: 36px solid transparent;
height: 0px;
}
Some Text
You can also use clip-path for this, eg:
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
.skewed_button {
background: yellow;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
}
Some Text
One solution is to use css triangles on :before and :after. This solution leaves the cleanest HTML.
This jsfiddle demonstrates
.is-skewed {
width: 80px;
height: 40px;
background-color: #f07;
display: block;
color: #fff;
margin-left: 40px;
}
.is-skewed:before,
.is-skewed:after {
content: '';
width: 0;
height: 0;
}
.is-skewed:before {
border-bottom: 40px solid #f07;
border-left: 20px solid transparent;
float:left;
margin-left: -20px;
}
.is-skewed:after {
border-top: 40px solid #f07;
border-right: 20px solid transparent;
float:right;
margin-right: -20px;
}
CSS triangles use thick borders on elements with 0 dimensions with the points at which the borders meet providing the diagonal line required for a triangle (a good visualisation is to look at the corner of a picture frame, where the two borders meet and create triangles). It's important that one border is transparent and one coloured and that they are adjacent (i.e. left and top, not left and right). You can adjust the size, orientation and the lengths of the sides by playing with the border sizes.
For your button, we also use floats and negative margins to pull them outside of the element and line them up right. Position absolute and negative left and right values would also be a good solution to positioning
You can also do :hover states
.is-skewed:hover {
background-color: #40f;
}
.is-skewed:hover:after {
border-top-color: #40f;
}
.is-skewed:hover:before {
border-bottom-color: #40f;
}
It's important to note the use of background-color and border-color and also that the :hover comes first in all the relevant selectors. If the hover came second this would happen
I'm looking for an easy way with a single tag (just <a>)to create a skew effect on the borders, but keep the text the way it is.
I would know how do with a span in- or outside, but I don't want to have additional, pretty much zero meaning HTML on the page.
Example below.
You can unskew the child element i.e. provide the opposite skew co-ordinates as you specified for the parent.
Here is a working example
Suppose you have below as you html,
<div class="btn">
<button><div class="btn-text">Click</div></button>
</div>
If we skew the parent element by 20deg then we should skew the child element by -20deg as,
.btn {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
.btn-text {
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
padding: 20px;
}
You can simply accompish desired effect using CSS triangle tricks.
Just add some styles for the ::before and :: after pseudo-classes.
.skewed_button {
background: #32CD32;
color: #000;
text-decoration: none;
font-size: 20px;
display: inline-block;
height: 30px;
margin-left: 15px;
padding: 6px 10px 0;
}
.skewed_button::before {
content: "";
float: left;
margin: -6px 0 0 -25px;
border-left: 15px solid transparent;
border-bottom: 36px solid #32CD32;
height: 0px;
}
.skewed_button::after {
content: "";
float: right;
margin: -6px -25px 0 0 ;
border-left: 15px solid #32CD32;
border-bottom: 36px solid transparent;
height: 0px;
}
Some Text
You can also use clip-path for this, eg:
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
.skewed_button {
background: yellow;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
}
Some Text
One solution is to use css triangles on :before and :after. This solution leaves the cleanest HTML.
This jsfiddle demonstrates
.is-skewed {
width: 80px;
height: 40px;
background-color: #f07;
display: block;
color: #fff;
margin-left: 40px;
}
.is-skewed:before,
.is-skewed:after {
content: '';
width: 0;
height: 0;
}
.is-skewed:before {
border-bottom: 40px solid #f07;
border-left: 20px solid transparent;
float:left;
margin-left: -20px;
}
.is-skewed:after {
border-top: 40px solid #f07;
border-right: 20px solid transparent;
float:right;
margin-right: -20px;
}
CSS triangles use thick borders on elements with 0 dimensions with the points at which the borders meet providing the diagonal line required for a triangle (a good visualisation is to look at the corner of a picture frame, where the two borders meet and create triangles). It's important that one border is transparent and one coloured and that they are adjacent (i.e. left and top, not left and right). You can adjust the size, orientation and the lengths of the sides by playing with the border sizes.
For your button, we also use floats and negative margins to pull them outside of the element and line them up right. Position absolute and negative left and right values would also be a good solution to positioning
You can also do :hover states
.is-skewed:hover {
background-color: #40f;
}
.is-skewed:hover:after {
border-top-color: #40f;
}
.is-skewed:hover:before {
border-bottom-color: #40f;
}
It's important to note the use of background-color and border-color and also that the :hover comes first in all the relevant selectors. If the hover came second this would happen
I want transparent text from which background should be visible but text shadow should be opaque.
I tried:
opacity:0;
text-shadow 3px 3px 3px orange;
but text-shadow also becomes transparent.
I want result like this:
http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4
Please help.
You can get this effect in modern browsers (Chrome, Safari and FF) using a blend mode option
.test {
font-size: 360px;
position: relative;
border: solid 1px;
display: inline-block;
margin: 5px;
text-shadow: orange 10px 0px 30px, orange -10px 0px 30px, orange 0px 10px 30px, orange 0px -10px 30px;
color: black;
background: black;
mix-blend-mode: screen;
}
body {
background-image: url(http://i.stack.imgur.com/08Y1e.jpg);
}
<div class="test">STAR FIELD</div>
I uploaded the background image to avoid problems with the link
if you have a solid background, you can try this way:
http://jsfiddle.net/aKp3C/
<div class="content">
<div class="text text1">
Example text
</div>
<div class="text text2">
Example text
</div>
</div>
body{
background-color: #333;
}
.content{
position: relative;
}
.text{
font-size: 25px;
font-weight: bold;
}
.text1{
text-shadow: 3px 3px 3px orange;
}
.text2{
position: absolute;
left: 0;
top: 0;
color: #333;
}
You could use the text-shadow-blend-mode CSS3 property for that purpose.
However, it seems it is not yet supported (Firefox 39.0 ignores it completely).
I am also struggling with (semi-)transparent text outlining. The problem is, text-shadow doesn't really generate outlines but duplicates the text behind its foreground and eventually shifts and blurs it. (Any text whose color is not opaque will be blend together with its own shadow at first.)
Currently, this may not be doable using CSS.
EDIT: You might, however, find useful this advice involving SVG and its stroke property.
I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover.
I am using the "caret" on a on the root menu items to show the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI.
I've also tried the play icon twitter has but it doesn't quite match either.
Just switch up the borders (see fiddle):
HTML
<b class="caret-right"></b>
CSS
.caret-right {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid;
display: inline-block;
height: 0;
opacity: 0.3;
vertical-align: top;
width: 0;
}
I do it by adding a class that simply modifies the border styles to point the caret to the right. That way you can toggle a caret right/down by adding/removing the modifying class.
HTML:
<span class='caret caret-right'></span>
CSS:
.caret-right {
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
Use the bootstrap (3.0) Glyphicons
<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP -->
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN-->
As user2661940 said you can use glyphicons for Bootstrap 3 or you can also make your own class for every side.
For example
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
I use these styles to do that (it works without bootstrap as well)
HTML:
<span class="caret up"></span>
<span class="caret right"></span>
<span class="caret down"></span>
<span class="caret left"></span>
CSS:
.caret {
border: 5px solid transparent;
display: inline-block;
width: 0;
height: 0;
opacity: 0.5;
vertical-align: top;
}
.caret.up {
border-bottom: 5px solid;
}
.caret.right {
border-left: 5px solid;
}
.caret.down {
border-top: 5px solid;
}
.caret.left {
border-right: 5px solid;
}
Another option for anyone using font awesome:
<i class="fa fa-caret-right" aria-hidden="true"></i>
I added a rotation class to the span
HTML:
<span class="rotate270 caret"></span>
CSS:
.rotate270 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
You can obviously create other angle classes as desired.
you can use simple code:
HTML
<span class="caret"></span>
CSS:
.caret{
border-color:#ffffff transparent transparent transparent;
border-width:4px;
border-style:solid;
content: ""
display:inline-block;
}
Just add the css to rotate the caret on mouse hover
.navbar-nav>li>.dropdown-menu{
display:block;
visibility:hidden;
}
.navbar-nav>li:hover>.dropdown-menu{
visibility:visible;
}
.navbar-default .navbar-nav>li:hover>a .caret{
transform:rotate(-90deg);
transition:all 0.3s ease-in-out;
}
this is my CSS of a DIV Tag for a Marker /ToolTip .
<div class="flotr-mouse-value">
position:absolute;
z-index:1;
background: #FFD772;
height: 75px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
position: absolute;
box-shadow: 3px 3px 3px #666;
left: 50px;top: 50px;
width: 150px;
height: 80px;
</div>
Waht i want is that , to have a down arrow at the bottom of the border similar to as shown here
http://www.tiikoni.com/tis/view/?id=fa381ec
I have tried modifying the below attribute , but of no use
border-bottom:
You can make a triangle by using code like:
border-color: #ff0 transparent transparent transparent;
It looks like this:
Here's the code for that example http://jsfiddle.net/hyH48/
There are a lot of limitations (for isntance the box shadow won't work for the triangle), but it doesn't use any images, and is pure CSS.
I used #RichBradshaw's answer but elaborated on it. While he's correct in that it's not possible (or at least very difficult) to add a shadow to the arrow, I achieved the effect by utilizing the :before and :after pseudo elements. Use Rich's code within a :after selector, and then in the :before selector, create the same arrow, offset in the direction you want your shadow, with a transparent color.
Here is an example! jsfiddle
yes, you can do it from css check this
arrow with border on it:
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
}