Related
I need a button with the following characteristics:
User clicks the left portion - "Edit" of the button and it takes
them to a form.
User clicks the right portion and it has a drop down
of a sub list menu.
I wrote the snippet below using two separate buttons which I took the approach from w3school and it looks like what I want except:
When I hover it, each button has its own hover behavior indepdently instead of doing it together.
When I reside my browser, this button breaks up into different rows.
How can I fix these deficiencies? or better yet if there is an out of the box button like this? I tried to google "button with side menu", "button side dropdown", button sub menu" ect.. but no luck so far.
.leftSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:5px 2px 2px 5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.leftSideButton:active {
position:relative;
top:1px;
}
.rightSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:2px 5px 5px 2px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 13px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.rightSideButton:active {
position:relative;
top:1px;
}
.splitButton{
display: block;
}
.btn-group leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
</body>
</html>
Move the hover to the parent div then apply the styles to both buttons.
.leftSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 5px 2px 2px 5px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 23px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
}
.leftSideButton:active {
position: relative;
top: 1px;
}
.rightSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 2px 5px 5px 2px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 13px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
.rightSideButton:active {
position: relative;
top: 1px;
}
.splitButton {
display: block;
}
/* changes */
.btn-group {
/* Shrink the parent to fit the content */
display: inline-flex;
}
.btn-group:hover .rightSideButton,
.btn-group:hover .leftSideButton {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
When I hover it, each button has its own hover behavior indepdently instead of doing it together.
Remove .btn-group leftSideButton:hover{...} from your css. You have already have this hover effect for each button declared previously.
When I reside my browser, this button breaks up into different rows.
Add .btn-group{ display: flex; flex-wrap: nowrap; } to your css.
I need to add two stars icons without using any image or font awesome. I need to add them in CSS through :after, is this possible?
I want it to look like this:
Currently it looks like this:
a {
width: 247px;
height: 59px;
float: none;
margin: 100px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #555555;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 59px; /* http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 */
background: #e3e3e3; /* Old browsers */
background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0); /* IE6-9 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px 1px #777777;
box-shadow: 0 1px 3px 1px #777777;
text-shadow: 0 1px 0 #dedede;
position: relative;
display: block;
}
a:before {
width: 261px;
height: 73px;
position: absolute;
top: -9px;
left: -10px;
background: #cbcbcb;
content: "";
border: #fff 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 0 0 2px #666666;
box-shadow: 0 0 0 2px #666666;
z-index: -1;
}
a:after {
width: 247px;
height: 59px;
position: absolute;
top: -9px;
left: -9px;
background: none;
content: "";
z-index: 1;
}
Checkout
One possible solution is to use white-space: pre;, so that you can attach two stars and display each one at each side of the button with just :after as you asked.
a:after {
...
content: "✭ ✭";
white-space: pre;
}
a {
position: relative;
display: block;
width: 247px;
height: 59px;
margin: 100px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #555555;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 59px;
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
border-radius: 8px;
box-shadow: 0 1px 3px 1px #666;
text-shadow: 0 1px 0 #dedede;
}
a:before {
position: absolute;
z-index: -1;
top: -9px;
left: -9px;
width: 261px;
height: 73px;
content: "";
border: #fff 2px solid;
border-radius: 15px;
background: #cbcbcb;
box-shadow: 0 0 0 2px #666;
}
a:after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 247px;
height: 59px;
content: "✭ ✭"; /* \2605 */
white-space: pre;
}
Checkout
One other way is to put all relevant styles into one place, so that you'll have both :before and :after free to use for the stars, and control the position of each one individually.
a {
...
box-shadow: 0 1px 3px 1px #666, 0 0 0 7px #ccc, 0 0 0 9px #fff, 0 0 0 11px #666;
}
a:before, a:after {
content: "✭";
}
a:before {
margin-right: 12px
}
a:after {
margin-left: 12px;
}
a {
position: relative;
display: block;
width: 247px;
height: 59px;
margin: 100px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #555555;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 59px;
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
border-radius: 6px;
box-shadow: 0 1px 3px 1px #666, 0 0 0 7px #ccc, 0 0 0 9px #fff, 0 0 0 11px #666;
text-shadow: 0 1px 0 #dedede;
}
a:before,
a:after {
content: "✭"; /* \2605 */
}
a:before {
margin-right: 12px
}
a:after {
margin-left: 12px;
}
Checkout
You can use the :before and :after to insert the FontAwesome stars before and after the link text, like this:
a:before,
a:after {
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #888;
}
a:before {
content:"\f005"; /* FontAwesome star content */
margin-right: 10px;
}
a:after {
content:"\f005"; /* FontAwesome star content */
margin-left: 10px;
}
And you don't need to use :before and :after to achieve your extra bordering effects. You can simply use comma separated box-shadow values with to achieve the same effect, like this:
box-shadow: 0 1px 3px 1px #777777, 0 0 0 10px #cbcbcb, 0 0 0 12px #fff, 0 0 0 14px #000;
The working example:
body {
margin: 0;
padding: 0;
}
a {
width: 247px; height:59px; float:none; margin:100px auto; font-family:Arial, Helvetica, sans-serif; font-size:25px; font-weight:bold; color:#555555; text-align:center; text-transform:uppercase; text-decoration:none; line-height:59px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 *
background: #e3e3e3;
/* Old browsers */
background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0);
/* IE6-9 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px 1px #777777;
box-shadow: 0 1px 3px 1px #777777, 0 0 0 10px #cbcbcb, 0 0 0 12px #fff, 0 0 0 14px #000;
text-shadow: 0 1px 0 #dedede;
position: relative;
display: block;
}
a:before,
a:after {
display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #888;
}
a:before {
content:"\f005";
margin-right: 10px;
}
a:after {
content:"\f005";
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Checkout
I edit your CSS code Please check carefully.
body {
margin: 0;
padding: 0;
text-align: center;
}
a {
width: 247px; height:59px; float:none; margin:100px auto; font-family:Arial, Helvetica, sans-serif; font-size:25px; font-weight:bold; color:#555555; text-align:center; text-transform:uppercase; text-decoration:none; line-height:59px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 *
background: #e3e3e3;
/* Old browsers */
background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0);
/* IE6-9 */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px 1px #777777;
box-shadow: 0 1px 3px 1px #777777;
text-shadow: 0 1px 0 #dedede;
position: relative;
display: inline-block;
}
a:before {
width: 261px;
height: 73px;
position: absolute;
top: -9px;
left: -10px;
background-color: transparent;
background-attachment: scroll;
background-image: url(https://www.podomatic.com/assets/homebase/icon-star-64091d94372b5effa95e1f6f8d07846e.png);
background-position: left 30px center;
background-repeat: no-repeat;
background-size: 20px 20px;
content: "";
border: #fff 2px solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 0 0 2px #666666;
box-shadow: 0 0 0 2px #666666;
z-index: 0;
}
a:after {
background-color: transparent;
background-attachment: scroll;
background-image: url(https://www.podomatic.com/assets/homebase/icon-star-64091d94372b5effa95e1f6f8d07846e.png);
background-position: right 30px center;
background-repeat: no-repeat;
background-size: 20px 20px;
width: 261px;
height: 73px;
position: absolute;
top: -9px;
left: -9px;
/*background: none;*/
content: "";
z-index: 1;
}
Checkout
For anyone looking for Pure CSS stars, because the original poster stated they didn't want to use fontawesome or images, here's the code :
<!doctype html>
<html>
<head>
<title>Untitled</title>
<style>
.starCont{
display:inline-block;
position: relative;
}
.tri-1 {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 8px solid #f8f800;
}
.tri-2 {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 7px solid transparent;
border-left: 5px solid #f8f800;
transform: rotate(16deg);
position: absolute;
top: -17px;
left: -3px;
}
.tri-3 {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 7px solid transparent;
border-right: 5px solid #f8f800;
transform: rotate(-16deg);
position: absolute;
top: -17px;
left: -2px;
}
</style>
</head>
<body>
<div class="starCont">
<div class="tri-1"><div class="tri-2"></div><div class="tri-3"></div></div>
</div> Star Rating
</body>
</html>
Use the -webkit and -mz prefixes for the transform properties to have the star rendered in older browsers. Otherwise, it's a world first, because after searching for a while, I couldn't find any stars using Pure CSS. I should credit the CSS-Tricks website, which posted the triangles, which gave me the idea for overlapping 3 triangles, then rotating 2 of them, to create a star.
For some unknown reason, numbers keep showing up on the side of my div. I have tried everything to remove these numbers, but I have absolutely no idea where they appear from. I do know that it has to do with either the stylesheet or the html file. I provided the image below.
Also, "Vitalynx" is shifted all the way to the right and i cannot shift it back in the div with margin-left.. Any ideas? Help would be much appreciated!
leaderboard
Here's the html code:
<div id="ld">
<div class="leaderboard">
<h1>
Most active Players
</h1>
<ol>
<?= $fgmembersite->User1(); ?>
<?= $fgmembersite->User10(); ?>
</ol>
</div>
</div>
<br><br>
Here's the CSS:
/*--------------------
Leaderboard
--------------------*/
.ld h1 {
z-index: 0;
margin-top: -20px;
margin: -20px -5px 4px;
line-height: 40px;
text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
font-weight: bold;
font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: white;
text-align: center;
background: #12a7ee;
border-bottom: 0px solid #cfcfcf;
border-radius: 5px 5px;
-webkit-box-shadow: 3px 1px whitesmoke;
border-left:solid 0px #2ab7ec;
margin-left: 0px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
border-radius: 6px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
}
.leaderboard *,
.leaderboard *::before,
.leaderboard *::after {
box-sizing: border-box;
}
.leaderboard {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, 5%);
width: 245px;
height: 335px;
background-color: white;
background-color: #white;
border-radius: 10px;
box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
}
.leaderboard h1 {
margin: -20px -2.8px 5px;
line-height: 40px;
text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
font-weight: bold;
font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #fff;
text-align: center;
background: #12a7ee;
border-bottom: 0px solid #cfcfcf;
border-radius: 5px 5px;
-webkit-box-shadow: 3px 1px whitesmoke;
border-left:solid 0px #2ab7ec;
margin-left: -17.7px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
border-radius: 6px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
margin-left: -3px;
z-index: 0;
font-size: 18px;
color: #fffff;
padding: 12px 13px 15px;
}
.leaderboard h1 svg {
width: 25px;
height: 26px;
position: relative;
top: 3px;
margin-left: -30px;
vertical-align: baseline;
}
.leaderboard ol li {
margin-left: -22px;
position: relative;
z-index: 1;
font-size: 14px;
counter-increment: leaderboard;
padding: 18px 0px 23px 245px;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
}
.leaderboard ol li::before {
position: absolute;
z-index: 2;
top: 15px;
left: 15px;
width: 20px;
height: 20px;
line-height: 20px;
color: #2b70ab;
background: #fff;
border-radius: 20px;
text-align: center;
}
.leaderboard ol li mark {
position: absolute;
text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
z-index: 2;
top: 0;
left: -4px;
width: 100%;
height: 100%;
padding: 18px 10px 18px 50px;
margin: 0;
background: none;
color: #fff;
}
.leaderboard ol li mark::before, .leaderboard ol li mark::after {
position: absolute;
z-index: 1;
bottom: -11px;
left: -9px;
border-top: 10px solid #563689;
border-left: 10px solid transparent;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity: 0;
}
.leaderboard ol li mark::after {
left: auto;
right: -9px;
border-left: none;
border-right: 10px solid transparent;
}
#d {
text-decoration: underline;
}
#e {
margin-left: -40px;
color: #fff;
text-shadow: 1px 3px 3px rgba(0,0,0,0.2);
}
.leaderboard ol li small {
position: relative;
text-shadow: 1px 3px 3px rgba(0,0,0,0.8);
font-size: 13px;
margin-left: -34px;
z-index: 2;
display: block;
color: #05eccc;
}
.leaderboard ol li::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
}
.leaderboard ol li:nth-child(1) {
background: #82d1a1;
}
.leaderboard ol li:nth-child(1)::after {
background: #ac918e;
}
.leaderboard ol li:nth-child(2) {
background: #1bb288;
}
.leaderboard ol li:nth-child(2)::after {
background: #b79a98;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.leaderboard ol li:nth-child(2) mark::before, .leaderboard ol li:nth-child(2) mark::after {
border-top: 6px solid #ba4741;
bottom: -7px;
}
.leaderboard ol li:nth-child(3) {
background: #119c75;
}
.leaderboard ol li:nth-child(3)::after {
/* background: #d7514d; */
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11);
}
.leaderboard ol li:nth-child(3) mark::before, .leaderboard ol li:nth-child(3) mark::after {
bottom: -3px;
}
.leaderboard ol li:nth-child(4) {
background: #108363;
}
.leaderboard ol li:nth-child(4)::after {
background: #cd4b4b;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(4) mark::before, .leaderboard ol li:nth-child(4) mark::after {
top: -7px;
bottom: auto;
border-top: none;
border-bottom: 6px;
}
.leaderboard ol li:nth-child(5) {
background: #0c7558;
border-radius: 0 0 10px 10px;
}
.leaderboard ol li:nth-child(5)::after {
background: #c24448;
margin-top: -20px;
margin: -21px -16.8px 5px;
line-height: 40px;
text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
font-weight: bold;
font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #fff;
text-align: center;
background: #12a7ee;
border-bottom: 0px solid #cfcfcf;
border-radius: 5px 5px;
-webkit-box-shadow: 3px 1px whitesmoke;
border-left:solid 0px #2ab7ec;
margin-left: -17.7px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
border-radius: 6px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
}
.leaderboard ol li:nth-child(5) mark::before, .leaderboard ol li:nth-child(5) mark::after {
top: -9px;
bottom: auto;
border-top: none;
border-bottom: 8px;
}
.leaderboard ol li:hover {
z-index: 2;
overflow: visible;
}
.leaderboard ol li:hover::after {
opacity: 1;
-webkit-transform: scaleX(1.06) scaleY(1.03);
transform: scaleX(1.06) scaleY(1.03);
}
.leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after {
opacity: 1;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
<ol> is the tag for an Ordered List, and so by default it will have numbers. If you'd like to remove them, do the following:
ol {
list-style-type:none;
}
In regards to your alignment issue, it seems that your right column text is left-aligned. I'd suggest making that text right-aligned, and the container would have to be positioned along the right hand side. Based on your structure, potential solutions would either be using position: absolute; right: 5px; on the text element, and then a position: relative on its parent or you could use float: right;, though I'd only suggest this method if you're familiar with how float works in general.
Your CSS is far too lengthy at this point for me to start digging through for an exact answer. Consider trimming it or posting only the relevant blocks and I can take a better look.
If I had to guess, I'd assume this is the block you're using to place the right column:
.leaderboard ol li {
...
margin-left: -22px;
padding: 18px 0px 23px 245px;
...
}
You're moving the text left by 245px using padding, which is a very "thrown together" method of accomplishing what you want. I'd start by changing the 245px to 0px and add a text-align: right; and moving forward from there.
Change <ol> to <ul> and add this style
ul li{list-style:none}
<a class="button icon tag" href="#"><span>Show All Tasks</span></a>
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px 20px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
display: block;
color: #597390;
line-height: 24px;
font-size: 20px;
font-weight: bold;
width: 100%;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button.icon {
padding-left: 0px;
}
a.button.icon span{
padding-left: 100px;
background: url(icons2.png) no-repeat 0 -4px;
}
a.button.icon.tag span {
background-position: 0px -65px;
}
The Image (icons2 40X96):
How it is displayed in the browser:
How can I display the entire image so it doesn't cut off?
Since it is just one image, how do I eliminate the user of position, rather just display the image?
Just give the span display:block; and height:30px;:
a.button.icon span{
padding-left: 100px;
background: url(http://i.stack.imgur.com/fEeuO.png) no-repeat 0 -4px;
height:30px;
display:block;
}
To stop the cut off, i changed the background position a little bit:
a.button.icon.tag span {
background-position: 0px -62px;
}
JSFiddle
I would guess your line-height property is restricting how much of the image is shown. Also try adding overflow: visible to the icon's container.
For a code quiz I am trying to replicate the attached image using CSS and HTML only. The gradients and borders seem to be working out fine, but I am having trouble getting the ribbon edges to look curved.
Here is my markup:
<div class="container">
<div class="ribbon-wrapper-green"><div class="ribbon-green">AWESOME!</div></div>
<div class="ribbon-bottom-left"></div>
<div class="bottom-left-gradient"></div>
And here is my CSS:
.container {
width:300px;
height:300px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
position:relative;
border:#CCC 1px solid;
background-color:#EBEBEB;
box-shadow:1px 1px 1px #CCC;
}
.ribbon-wrapper-green {
width: 290px;
height: 290px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: 25px Arial;
text-align: center;
text-shadow:0px 0px 6px #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 20px 0;
left: 7px;
top: 66px;
width: 363px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #FFF;
-webkit-box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 4px solid #6e8900;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position:absolute;
bottom: -4px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.ribbon-bottom-left {
width: 0px;
height: 0px;
border-style: solid;
border-width: 250px 0 0 250px;
border-color: transparent transparent transparent #D32023;
position:absolute;
bottom:-5px;
left:-5px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
z-index:1;
}
.bottom-left-gradient {
position:absolute;
bottom:-8px;
left:-8px;
z-index:100;
height:245px;
width:245px;
opacity:0.4;
filter:alpha(opacity=40);
background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 4%, rgba(255,255,255,0) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(4%,rgba(255,255,255,0.92)), color-stop(51%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* IE10+ */
background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 4%,rgba(255,255,255,0) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-style:solid;
border-width:0 0 5px 5px;
border-radius:10px;
-moz-border-radius:10px;
border-color:#E41316;
}
The image is coming out like this example here: http://arunsood.me/code-quizzes/placebo-effect/.
The original I need to copy is below. How can I achieve the edge bending effect via CSS alone?