Bootstrap Snippet Blur Menu, Menu Panel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
    
    <div class="prflpg" align="center"><img alt="" src="https://yt3.ggpht.com/-KAW-Ma7ETqU/AAAAAAAAAAI/AAAAAAAAAAA/gJVH28o-_Vg/s100-c-k-no/photo.jpg"></div>
    
    <ul class="bmenu">
                    <li><a href="#">Adobe Photoshop</a></li>
                    <li><a href="#">HTML, HTML5</a></li>
                    <li><a href="#">CSS, CSS3</a></li>
                    <li><a href="#">Dreamweaver</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">Javascript, Jquery</a></li>
                    <li><a href="#">Flash, Action Script 2.0</a></li>
                    <li><a href="#">Adobe Premier</a></li>
                    <li><a href="#">Adobe Illustrator</a></li>
                    <li><a href="#">Coral Draw</a></li>
                </ul>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(100%, #D9D9D9)); /* safari4+,chrome */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #D9D9D9 100%); /* ie10+ */
background: radial-gradient(ellipse at center, #ffffff 0%, #D9D9D9 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D9D9D9',GradientType=1 ); /* ie6-9 */}
.bmenu{
    padding:30px; border:#FFF solid 20px;
    margin: 0 0 10px 0;
    position: relative;
}
.prflpg {padding:10px; background:#fff;}
.bmenu li{
    font-size: 40px;
    display: block;
}
.bmenu li a{ text-decoration:none;
    display: block;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
    color: #005E84;
    padding: 5px 20px;
    margin: 2px;
    background: rgba(255,255,255,0.1);
    letter-spacing: 1px;
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Blur Menu, Menu Panel"
Bootstrap 3.3.0 Snippet by Chandan Kumar

Related: See More

Questions / Comments:

"Blur Menu, Menu Panel" Bootstrap 3.3.0 Snippet by Chandan Kumar

Related: See More

Questions / Comments:

"Blur Menu, Menu Panel"
Bootstrap 3.3.0 Snippet by Chandan Kumar