How to get solid box-shadow on all sides only using CSS3? - html

I am trying to make something similar to the button showed in picture.
I tried the following:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
The above CSS3 code gave me the following:
I am not sure how to make the same button with a border that looks similar to the picture.


first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweaks to your code and got this output.
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>


There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.
button {
display: inline-block;
padding: 6px 24px;
border: 1px solid #dcdcdc;
border-radius: 6px;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: #fff;
cursor: pointer;
}
button:hover {
box-shadow:
rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
<button>QUIT</button>

Related

CSS Drop Shadow effect not displaying correctly

I am creating a button with a drop shadow effect (neumorphism) but when I apply my CSS to the button is just appears as a 2 toned solid button...Which part of the CSS am I using incorrectly? Are my drop shadow values wrong relative to the size of the button? Changing the width and height doesn't help.
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 35px;
}
.buysellbutton {
width: 44px;
height: 44px;
background: #F0F0F3;
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
border-radius: 16px;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
</div>

to remove black border from button just add broder-style:none to button. Added one more button with hover and active styling.
for creating Neumorphism effect you can check https://neumorphism.io/
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 15px;
padding: 10px;
}
.buysellbutton {
width: 80px;
height: 44px;
border-style:none;
border-radius: 16px;
background: #F0F0F3;
box-shadow: 18px 18px 36px #c5c5c7,
-18px -18px 36px #ffffff;
outline:none;
}
.button {
width: 150px;
height: 50px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
outline: none;
border-style: none;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
span {
font-size: 25px;
font-weight: semibold;
}
.button:hover {
opacity: 0.7;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
.button:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
<button class="button"><span>Buy</span></button>
</div>

First, use the below code at the top of all CSS
button{
all: unset;
}
and instead of
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
use
box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);

Having issue with aligning a image in center of fixed nav bar when page size changes

I'm having some trouble with this wedding website I'm making for school. The problem being that the center decoration piece witch will eventually be a logo, doesn't align with the top of the page when the screen size is changed. On the screen I'm working on it looks fine, but on other screens it gets messed up.
Screen I'm working on. Looks fine.
Friend's Screen is moved down or on other screens is cut off.
I have tried everything from changing the position type and the display type, trying to set margins. To even setting it fixed and then positioning it where I want it, but always ends up messing something else up. The nav bar is fixed at the top of the screen and the surrounding links are aligned to it. I can't seem to solve it and am wondering if anyone has any solutions.
Here is a link to the download for the website:Website
#import url('http://weloveiconfonts.com/api/?family=entypo');
html{
background-image: url("background.jpg");
background-size:cover;
background-position:0px 60px;
background-attachment: fixed;
padding:0px;
}
body{
margin:0;
}
nav{
background-color: snow;
text-align: center;
position: fixed;
width:100%;
margin:0;
z-index: 100;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
section{
padding-bottom: 20px;
text-align: center;
position: relative;
top: 60px;
background-color: dimgrey;
z-index:50;
margin-left:15%;
margin-right:15%;
}
footer{
font-size: 13px;
z-index: 75;
font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
color: slategray;
margin-top:60px;
top:60px;
background-color: #ddd;;
height:60px;
margin-left:15%;
margin-right:15%;
padding: 20px;
-webkit-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px -4px 15px 0px rgba(0,0,0,0.75);
}
nav ul{
text-align: center;
list-style:none;
margin: 0;
padding: 0;
}
nav ul li{
text-align: center;
display: inline;
margin:0px;
}
nav ul li a{
margin-left:-2px;
margin-right:-2px;
color: slategray;
display: inline-block;
text-decoration: none;
font-size:25px;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
padding: 7px;
text-align:center;
padding-left: 10px;
padding-right:10px;
padding-top:15px;
padding-bottom:15px;
height: 10%;
width:9%;
-webkit-transition: background-color 0.2s;
}
nav ul li a:hover{
background-color:#d9d9d9;
}
nav ul li a:active{
background-color:#d9d9d9;
}
nav ul li img{
z-index: -20;
align-content: center;
position: relative;
top: 75px;
background-color: snow;
width:20%;
height:100%;
margin-left: 15px;
margin-right:15px;
margin-top:-210px;
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:5px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.wedding{
width:100%;
margin-bottom: 5px;
}
h1{
background-color: snow;
font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
margin-bottom:25px;
padding:10px;
-webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.75);
}
.footer-info{
margin: 0;
list-style:none;
text-decoration: none;
float: left;
}
.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
margin: 0;
padding: 0;
border: none;
border-spacing: 0;
}
/* Calendar Wrapper */
.ui-datepicker {
display: none;
width: 294px;
padding: 35px;
cursor: default;
margin-left:20px;
text-transform: uppercase;
font-family: Tahoma;
font-size: 12px;
background: snow;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
}
/* Calendar Header */
.ui-datepicker-header {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #d6d6d6;
}
.ui-datepicker-title { text-align: center; }
/* Month */
.ui-datepicker-month {
position: relative;
padding-right: 15px;
color: #565656;
}
.ui-datepicker-month:before {
display: block;
position: absolute;
top: 5px;
right: 0;
width: 5px;
height: 5px;
content: '';
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Year */
.ui-datepicker-year {
padding-left: 8px;
color: #a8a8a8;
}
/* Prev Next Month */
.ui-datepicker-prev,
.ui-datepicker-next {
position: absolute;
top: -2px;
padding: 5px;
cursor: pointer;
}
.ui-datepicker-prev {
left: 0;
padding-left: 0;
}
.ui-datepicker-next {
right: 0;
padding-right: 0;
}
.ui-datepicker-prev span,
.ui-datepicker-next span{
display: block;
width: 5px;
height: 10px;
text-indent: -9999px;
background-image: url(../img/arrows.png);
}
.ui-datepicker-prev span { background-position: 0px 0px; }
.ui-datepicker-next span { background-position: -5px 0px; }
.ui-datepicker-prev-hover span { background-position: 0px -10px; }
.ui-datepicker-next-hover span { background-position: -5px -10px; }
/* Calendar "Days" */
.ui-datepicker-calendar th {
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
font-weight: normal;
color: #a8a8a8;
}
.ui-datepicker-calendar td {
padding: 0 7px;
text-align: center;
line-height: 26px;
}
.ui-datepicker-calendar .ui-state-default {
display: block;
width: 26px;
outline: none;
text-decoration: none;
color: #a8a8a8;
border: 1px solid transparent;
}
/* Day Active State*/
.ui-datepicker-calendar .ui-state-active {
color: #6a9113;
border-color: #6a9113;
}
/* Other Months Days*/
.ui-datepicker-other-month .ui-state-default { color: #565656; }
.social {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 10px;
line-height: 50px;
font-family: Entypo;
font-size: 28px;
text-align: center;
color: #555;
border-radius: 10px;
background: #eee;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.wrapper {
float: right;
text-align: center;
}
.social {
box-shadow: rgb(210, 210, 210) 1px 1px,
rgb(210, 210, 210) 2px 2px,
rgb(211, 211, 211) 3px 3px,
rgb(211, 211, 211) 4px 4px,
rgb(211, 211, 211) 5px 5px,
rgb(212, 212, 212) 6px 6px,
rgb(212, 212, 212) 7px 7px,
rgb(212, 212, 212) 8px 8px,
rgb(213, 213, 213) 9px 9px,
rgb(213, 213, 213) 10px 10px,
rgb(214, 214, 214) 11px 11px,
rgb(214, 214, 214) 12px 12px,
rgb(214, 214, 214) 13px 13px,
rgb(215, 215, 215) 14px 14px,
rgb(215, 215, 215) 15px 15px,
rgb(215, 215, 215) 16px 16px,
rgb(216, 216, 216) 17px 17px,
rgb(216, 216, 216) 18px 18px,
rgb(216, 216, 216) 19px 19px,
rgb(217, 217, 217) 20px 20px,
rgb(217, 217, 217) 21px 21px,
rgb(218, 218, 218) 22px 22px,
rgb(218, 218, 218) 23px 23px,
rgb(218, 218, 218) 24px 24px,
rgb(219, 219, 219) 25px 25px,
rgb(219, 219, 219) 26px 26px,
rgb(219, 219, 219) 27px 27px,
rgb(220, 220, 220) 28px 28px,
rgb(220, 220, 220) 29px 29px,
rgb(221, 221, 221) 30px 30px;
text-shadow: rgb(226, 226, 226) 1px 1px,
rgb(227, 227, 227) 2px 2px,
rgb(227, 227, 227) 3px 3px,
rgb(228, 228, 228) 4px 4px,
rgb(229, 229, 229) 5px 5px,
rgb(229, 229, 229) 6px 6px,
rgb(230, 230, 230) 7px 7px,
rgb(230, 230, 230) 8px 8px,
rgb(231, 231, 231) 9px 9px,
rgb(232, 232, 232) 10px 10px,
rgb(232, 232, 232) 11px 11px,
rgb(233, 233, 233) 12px 12px,
rgb(233, 233, 233) 13px 13px,
rgb(234, 234, 234) 14px 14px,
rgb(235, 235, 235) 15px 15px,
rgb(235, 235, 235) 16px 16px,
rgb(236, 236, 236) 17px 17px,
rgb(236, 236, 236) 18px 18px,
rgb(237, 237, 237) 19px 19px,
rgb(238, 238, 238) 20px 20px;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li><img src="img/hearts.png"></li>
<li>Reservations</li>
<li>Menue</li>
<li>Contact</li>
</ul>
</nav>
<section>
<img src="img/wedding.jpg" class="wedding">
</section>
<footer>
<ul class="footer-info">
<li> <p>Made by Taylor Bastian and Danial Andales for FBLA competition</p> </li>
<li><p>Copyright © 2015. SampleCorp</p></li>
</ul>
<div class="wrapper">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
</footer>
</body>
</html>

Try using "em" instead of pixels. pixel's are the same size on every screen and so they do not adjust to your screen, however, "em"s will be the same relative size on all screens, meaning that it will adjust to your screen. Hope this helped, I'm a newbie too. :P

This is a common problem with spaces, margin, padding sizes, in a large browser everything will works fine but in a small browser like width 1024px, the elements will move because they don't have enough space.
Change some css in
nav ul li img change top:-13px
It fix your example, if not, use media query, to large browser maybe is top:0 for smaller browser use the accurate top:xx,
have fun.

position span inline-blocks at the bottom of a div

Hello I'm developing a website header with bootstrap 3 which consists of 4 divs.
Each of those 4 divs has 2 nested divs inside.
In the first nested div exist 2 inline block spans, with different fonts and font-sizes.
Imagine one of the 4 initial divs, what I would like to achieve is something this:
___________________________________
| |
| |
| 180,00€ Total |
|---------------------------------|
| for the last 30 days |
| |
|_________________________________|
As you can see inside each of the 4 divs something like the above will exist.
180,00€ and total are 2 span inline-blocks.
I'd like the upper text to be aligned at the bottom and the lower text to be aligned at the top.
You may see a working demo here: JSFIDDLE
HTML:
<div class="row stats-row">
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat">
<div class="data">
<span class="data-num">81,00€</span>
<span class="num-desc">total</span>
</div>
<div class="data-desc">last 30 days</div>
</div>
</div>
CSS:
.row.stats-row {
-webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
background-color: #f9f9f9;
padding: 0px;
margin: 0px !important;
}
.row.stats-row .stat {
border-right: 1px solid #dae3e9;
border-bottom: 1px solid #dae3e9;
height: 80px;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */
.stats-row .stat .data{
text-align: center;
height: 50%;
}
.stats-row .stat .data-desc{
text-align:center;
height:50%;
color:#777;
font-style: italic;
font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
display: inline-block;
height:100%;
line-height:100%;
vertical-align: baseline;
}
.stats-row .stat .data .data-num{
margin-right:20px;
color: #32a0ee;
font-size: 25px;
}
.stats-row .stat .data .num-desc{
color: #29323a;
font-weight: bold;
font-size: 16px;
}
#monthGraphs .portlet-header h3{
text-align:center;
}
.graph{
width:100%;
}

Added spans in he .data-desc section and managed this
JSFiddle Demo
Adjusted HTML section
<div class="data-desc"><span>over the last</span><span>30 days</span></div>
CSS
#import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
.row.stats-row {
-webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
background-color: #f9f9f9;
padding: 0px;
margin: 0px !important;
}
.row.stats-row .stat {
border-right: 1px solid #dae3e9;
border-bottom: 1px solid #dae3e9;
height: 80px;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */
.stats-row .stat .data{
height: 50%;
}
.stats-row .stat .data-desc span{
height:50%;
color:#777;
font-style: italic;
font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
//display: inline-block;
height:100%;
line-height:100%;
vertical-align: bottom;
}
.stats-row .stat .data .data-num{
color: #32a0ee;
font-size: 25px;
}
.stats-row .stat .data .num-desc{
color: #29323a;
font-weight: bold;
font-size: 16px;
}
/* EDIT BELLOW */
.stats-row .stat .data{
overflow: hidden; /* quick clearfix */
}
.data span,
.data-desc span{
width:50%;
float:left;
text-align:center;
}
.data span:last-child,
.data-desc span:last-child{
text-align:left;
padding-left:16px;
}
Adding classes to the spans would avoid the need to use last-child and the line-heights could use tweaking. Frankly, it might just be easier to use a table. :)

if i understand the question right. try adding this at the bottom of your css
.data-num{
padding-top:15px;
}

Why is this text-shadow not being applied?

The first Click here for a Demo button of this site has text-shadhow applied to it but it doesn't show:
http://www.chineselearnonline.com/ver7
Here's the CSS:
#content .call-to-act a {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
color: #ffffff;
padding: 15px 21px;
width: auto;
height: auto;
text-align: center;
}
background: -moz-linear-gradient(
top,#e45b2d 0%,#e34e18);
background: -webkit-gradient(linear, left top, left bottom,from(#e45b2d),
to(#e34e18));
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
border: 1px solid #a04830;
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
text-shadow: 1px 1px 1px #000;
}
and HTML:
<div class="call-to-act">
Click here for a Demo
</div>
What could be the problem?

I don't see any problem. Works for me in Chrome and Firefox. I noticed in your code an extra } maybe thats the problem (but with that the css wouldn't work at all.
P.S. You don't need the -webkit- or -moz-.

CSS3 - top notification bubble

How to add pure css notification bubble for the following example
Code CSS
<style>
.outer{
width:103px;
height:113px;
display:inline-block;
padding:5px;
margin:25px 14px 15px 14px;
font-size: 14px;
font-weight:bold;
color:#8E9FA9;
text-transform: uppercase;
border:1px solid #cccece;
text-align:center;
background-color:#f8f8f8;
letter-spacing: -0.06em;
-webkit-text-shadow: #ffffff 1px 1px;
moz-text-shadow: #ffffff 1px 1px;
text-shadow: #ffffff 1px 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
}
.outer:hover {
color:#7D878E !important;
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
}
a.outer span {
font-size: 14px;
display:block;
padding:86px 0 6px 0;
background-repeat:no-repeat;
background-color:#f1f2f3;
background-position:50% 18px;
}
a.outer span:hover {background-position:50% -98px;}
a.outer.add_user span {background-image:url(icon_big_user_add.png);}
</style>
Code HTML
<a href="#" class="outer add_user">
<span>Test</span>
</a>
Results
Question
How to add pure css notification bubble at the top of the box just like this example.
as you might seen there is blue ball that shows numbers, how to apply such notification ball based on the above example. ~ Thanks

See this fiddle.
CSS:
.outer {
width:103px;
height:113px;
display:inline-block;
padding:5px;
margin:25px 14px 15px 14px;
font-size: 14px;
font-weight:bold;
color:#8E9FA9;
text-transform: uppercase;
border:1px solid #cccece;
text-align:center;
background-color:#f8f8f8;
letter-spacing: -0.06em;
-webkit-text-shadow: #ffffff 1px 1px;
moz-text-shadow: #ffffff 1px 1px;
text-shadow: #ffffff 1px 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
}
.outer:hover {
color:#7D878E !important;
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
}
a.outer span {
font-size: 14px;
display:block;
padding:80px 0 6px 0;
}
.num_notifs {
border-radius: 5px;
width: 50%;
margin-top: 2px;
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #0052bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#0052bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#0052bf 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b7ea 0%,#0052bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#0052bf',GradientType=0 ); /* IE6-9 */
text-align: center;
color: white;
text-decoration: none;
font-weight: none;
}
HTML:
<a href="#" class="outer add_user">
<div class="num_notifs">4319</div>
<span>Test</span>
</a>