I'm trying to use box-shadow effect with bootstrap container. The class is:
.effect8
{
position:relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
border-radius:100px / 10px;
}
.effect8:after
{
right:10px;
left:auto;
transform:skew(8deg) rotate(3deg);
}
Whenever I use this class with container-fluid it is working. When I use it with container it is not working. Why?
Related
When the element is transparent, the shadow isn't inside that element. Look at this example:
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
https://jsfiddle.net/yrqvdbux/6/
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
}
<div class="bg">
<div class="shadow"></div>
</div>
How to make the shadow inside the box?
When i add background-color property it looks quite good, but look at the corners, it doesn't fit.
https://jsfiddle.net/y8o47pm9/5/
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px;
position:absolute;
top:100px; left:100px;
box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.45);
color:#fff;
font-size:25px;
text-align:center;
padding:20px 0;
}
<div class="bg">
<div class="shadow">Test</div>
</div>
Use inset to make the shadow inside the box.
Replace the box-shadow: 0px 0px 50px 30px rgba(0, 0, 0, 0.5); with box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
html, body {
width:100%;height:100%; margin:0;
}
* {
box-sizing:border-box;
}
.bg {
width:100%; height:100%;
background-color:#33FF55;
}
.shadow {
width:100px; height:100px;
position:absolute;
top:100px; left:100px;
box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, 0.5);
}
<div class="bg">
<div class="shadow"></div>
</div>
I have created a heading style with a line below heading.The issue is the line does not align itself with the alignment of text to center or right. It's always on the left side no matter where the text is aligned.
h1 {
margin: 0 0 25px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
color:black;
line-height:2em;
}
h1:after {
content:' ';
position: relative;
display:block;
width: 40px;
margin: 0 0;
border:1px solid #CB9033;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
You can use a class for center and right alignment:
h1 {
color:#000;
font-family:'Raleway', sans-serif;
font-weight:300;
line-height:2em;
margin:0 0 25px;
position:relative;
}
h1:after {
border:1px solid #CB9033;
content:'';
display:block;
margin:0;
position:absolute;
width:40px;
}
h1.right {
text-align:right;
}
h1.right:after {
right:0;
}
h1.center {
text-align:center;
}
h1.center:after {
left:50%;
transform:translateX(-50%);
}
<h1 class="right">Test</h1>
<h1 class="center">Test</h1>
<h1>Test</h1>
I have that html
<div id="menu">
<a class="active"></a>
</div>
<div id="content"></div>
And that css
#menu {
position:absolute;
z-index:1;
}
#content {
position:absolute;
z-index:2;
text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
}
#menu a.active:after {
position:absolute;
z-index:3;
text-shadow: -10px 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);
}
I want a.active:after was above then #content so that the shadow does not dropped on the a.active:after. How i can do this?
Try like this: Demo
I removed box shadow from #content and added to #menu as inner shadow.
CSS:
#menu {
position:absolute;
z-index:7;
width:200px;
height:100%;
background:green;
box-shadow:inset -10px 3px 10px rgba(0, 0, 0, .23), inset 0 3px 10px rgba(0, 0, 0, .16);
overflow:hidden;
}
#menu a.active {
padding:5px;
background:#fff;
display:block;
margin-top:20px;
z-index:9;
}
#content {
position:absolute;
z-index:3;
width:100%;
height:100%;
background:yellow;
left:200px;
}
#menu a.active:after {
content:"";
position: absolute;
width: 24px;
height: 24px;
background: yellow;
transform: rotate(45deg);
/* Prefixes... */
top: 21px;
right: -11px;
box-shadow: -10px 3px 10px rgba(0, 0, 0, .23), 0 3px 10px rgba(0, 0, 0, .16);
}
I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.
This is my JS Fiddle, Thanks.
CSS
.username .messages {
position:absolute;
margin:22px 0px 0px -70px;
width:200px;
max-height:auto;
color:black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
content:'.';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-18px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
Place the arrow as the before pseudoelement of the first link
Example fiddle: http://jsfiddle.net/ebcho06a/5/
.messages a:first-child:before {
content:'';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-20px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
.messages a:first-child:hover:before {
border-color:transparent transparent #000;
}
Effect on mouseover
I want to create mobile like on/off button with extjs in my web application. I couldn't find any sample or solution for this. I want actually like this: Demo
CSS
/*
Created by #JohnieHjelm. I took the liberty of doing this ON/OFF switch
just to express my love for CSS3. You're free to use this and of course
I hoped you learned something. Sharing is Caring♥
*/
body{
background:#eee;
}
ul{
list-style:none;
width:85px;
height:26px;
position:absolute;
top:50%;
left:50%;
margin:-13px 0 0 -42px;
}
ul li{
float:left;
line-height:23px;
font-size:11px;
padding:2px 10px 0;
background: #E5E5E5;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F3F3), to(#E5E5E5));
text-shadow:0 1px 0 #FFF;
border-left:1px solid #D5D5D5;
border-top:1px solid #D5D5D5;
border-bottom:1px solid #D5D5D5;
-webkit-box-shadow:0 1px 0 #FFF inset, 0 0 5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .3);
}
ul li:first-child{
-webkit-border-radius:5px 0 0 5px;
}
ul li:last-child{
-webkit-border-radius:0 5px 5px 0;
}
ul li a{
text-decoration: none;
font-family:Helvetica, Arial;
text-transform:uppercase;
color:#a1a1a1;
}
.on{
background: #505050;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#777), to(#505050));
text-shadow:0 -1px 0 #444, 0 0 7px #9AE658;
border-right:1px solid #444;
border-top:1px solid #444;
border-bottom:1px solid #444;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .7) inset, 0 1px 0 #FFF;
}
ul li:not(.on):active{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f1f1f1));
}
ul li.on a{
color:#7BBA47;
cursor: default;
}
jQuery
$(function(){
$("ul li").click(function(){
$("ul li").removeClass("on");
$(this).addClass("on");
});
});
How can I do this with ExtJS?
Just a quick one which can easily extended to a full component:
Ext.get(Ext.query("ul li")).on('click', function(e, t, eOpts) {
var el = Ext.get(this),p;
el.addCls("on");
if((p = el.next())) {
p.removeCls("on");
alert('can fire turn OFF');
} else if ((p = el.prev())){
p.removeCls("on");
alert('can fire turn ON');
}
});
Here's a JSFiddle