I am wondering if it is possible to add some kind of transition when calling element.remove() from the linking function in directive?
For example, in my directive I have:
this.$timeout(function(){
element.remove();
},2000)
This is my directive html:
<div class="error">{{message}}</div>
And my error class in css:
.error {
width: 200px;
height: auto;
top: 60px;
position: absolute;
z-index: 100;
right: 20px;
background-color: #383838;
color: #F0F0F0;
font-family: Museo Sans Webfont;
font-size: 20px;
padding: 10px;
text-align: center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px #383838;
-moz-box-shadow: 0px 0px 24px -1px #383838;
box-shadow: 0px 0px 24px -1px #383838;
transition: 1s;
}
Thanks
Related
Good afternoon, tell me please. I made up a block with a protruding corner on top of the block. On the whole block I have a corner that I made using box-shadow. How can I make exactly such a frame for a pseudo-element (.comment_text:before)
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">Some Text</div>
</div>
You can create another psudo element (::after) and make it litter bigger. Add the color similar to your Div border.
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #cfcfcf;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
}
.comment_text:after {
content: "";
display: block;
border-bottom: 18px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -12px;
left: 24px;
}
<div v-for='comment in comments' class="comment">
<div class="comment_text">{{ comment.text }}</div>
</div>
Try adding Height and Width to it. and play with it until you have the desired effect.
You can also add a background to define what color you want it in
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 15px solid transparent;
position: absolute;
top: -15px;
left: 2px;
height: 1px;
width: 10px;
background: blue;
}
.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent;
position: absolute;
top: -15px;
left: 22px;
box-shadow: -2px 0px 0px -0.5px #cfcfcf;
}
.comment_text:after {
content: "";
display: block;
width: 23px;
height: 0px;
top: -8px;
left: 20px;
box-shadow: 0px 0px 0px 1px #cfcfcf;
transform: rotate(35deg);
position: absolute;
}
I am attempting to create a stack of cards in a list, so that the cards can be swapped position-wise and organized.
However, while the ordering is not working either, right now I'm facing the problem of text from the card below showing up above the top-most card:
This is the code I have so far, for both the HTML and the CSS:
.catCards {
justify-content: space-between;
margin: 5px;
text-align: center;
z-index: 1;
margin-top: 256px;
}
.cwColumnCard {
margin-top: -190px;
}
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
}
.cwCTitle {
padding: 3px;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 18px;
z-index: 1;
}
.cwImage {
margin: 0 auto;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin-top: 5px;
z-index: 1;
}
.cwValue {
width: 100%;
text-align: center;
padding: 4px;
padding-bottom: 5px;
padding-top: 5px;
z-index: 1;
}
.cwSystemLabel {
width: 100%;
text-align: center;
padding-bottom: 4px;
padding-top: 4px;
z-index: 1;
}
<div class="catCards">
<ul>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card One</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card Two</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
</ul>
</div>
Z-Index was a brief attempt to fix the text positioning, but had no effect on it. What is causing the text to show up in this manner? The card below should be hidden once it's covered.
For the z-index property to work correctly you need to set the position property to something other than static.
In this case adding position: relative; to .cwCard will solve your issue.
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
position: relative;
}
I'm trying to achieve a 'press' button effect with a <button> and a <span> but for some reason the shadow is getting cut off on Safari ONLY.
I'm using two tags here because that's a limitation of the website i'm editing, I can't change the markup.
It's simple as this, HTML:
<button><span>A simple fucking button</span></button>
CSS:
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
button span {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
}
button:active,
button:hover {
color: inherit;
}
button:hover {
span {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
codepen.io example:
https://codepen.io/marlonmarcello/pen/dVBKpd
If you are open to dropping the span, then the button and styles can be adjusted to achieve the desired effect:
https://codepen.io/enquiren/pen/qMzLrd
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
&.pushable {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
&:hover {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
}
<button class="pushable">A simple button</button>
I have a div with the style as so:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
color: #fff;
text-align: center;
}
And also a background color.
I want to add a shadow to this circle.
Is that possible?
I'm seeing conflicting information, with people saying that's inside the image, so you can't apply any styles to it, and other people suggesting that a style like that exists or there is a way to do it.
You can use the box-shadow property:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
text-align: center;
box-shadow:0 0 2px 2px #999;
}
<div class="oval">text</div>
I think you are looking for box shadow:
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
This link explains it: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspAnd this link lets you experiment with it: http://www.cssmatic.com/box-shadow
Use box-shadow property:
.oval {
width: 150px;
height: 150px;
border-radius: 150px;
font-weight: bold;
font-size: 1em;
color: #fff;
text-align: center;
display: block;
background-color: red;
box-shadow: 3px 3px 3px #aaa;
}
<div class="oval"></div>
Box Shadow!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.circle {
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
box-shadow: 5px 5px 5px #BC7046;
position: absolute;
top: 10px;
left: 10px;
}
.circle2{
box-shadow: -6px -6px 6px #BCAE46;
}
#square {
border-radius: 5px;
width: 170px;
height: 170px;
background-color: #D0DA72;
position: relative;
}
<div id=square>
<div class=circle></div>
<div class='circle circle2'></div>
</div>
I use span inside div to simulate whole div as a link. It works well on Chrome & FF, but in IE, it doesn't.
I use an imported font (awesome font) to make appear an icon on the main div (with "before" statement in css). The div appears to be clickable just a little before and just a little after the icon. In FF and Chrom, the whoole icon is clickable... How to make it work in IE?...
css:
.tiremenuadmin{
font-family: 'fontawesome';
display: block;
font-size: 30px;
text-shadow: 0px 0px 7px #000000;
padding: 7px;
float: right;
width: 46px;
text-align: center;
margin: 7px 7px 0 0;
background-color: #364f71;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.7;
}
.tiremenuadmin:before{
content: "\F013";
}
.menuadmin{
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: bold;
color: #677889;
text-shadow: 1px 1px 0 #FFFFFF;
}
.enveloppe_menuadmin{
left: 50%;
margin-left: -10px;
margin-top: -70px;
width: 486px;
height: 50px;
position: fixed;
background: #364f71;
z-index: 100;
padding: 10px 12px 10px 10px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
.align_menuadmin{
left: -50%;
}
.cover_admin{
background: #364f71;
float: right;
width: 79px;
height: 8px;
left: 418px;
position: absolute;
}
.env_menuadmin{
width:100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f3f3f3;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.adminmenu, .adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_4, .adminmenu_5, .adminmenu_6, .adminmenu_7{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontawesome';
}
.adminmenu_00{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontello-home';
font-size: 21px;
top: 1px;
}
.adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_5, .adminmenu_6, .adminmenu_7 {
border-left:1px solid #fff;
border-right:1px solid #d6d6d6;
}
.adminmenu_00{
border-right:1px solid #d6d6d6;
}
.adminmenu_4{
border-left:1px solid #fff;
}
.adminmenu_0:before{
content: "\F007";
}
.adminmenu_00:before{
content: "\E0E0";
}
.adminmenu_1:before{
content: "\F085";
}
.adminmenu_2:before{
content: "\F0E0";
}
.adminmenu_3:before{
content: "\F059";
}
.adminmenu_4:before{
content: "\F011";
}
.adminmenu_5:before{
content: "\F0C1";
}
.adminmenu_6:before{
content: "\F15C";
}
.adminmenu_7:before{
content: "\F055";
}
.adminmenu_1 span, .adminmenu_2 span, .adminmenu_3 span, .adminmenu_4 span, .adminmenu_5 span, .adminmenu_6 span, .adminmenu_7 span, .adminmenu_0 span, .adminmenu_00 span {
position: absolute;
width: 100%;
height: 50px;
right: 0px;
top: 0;
z-index: 1000;
}
.adminmenu:hover, .adminmenu_00:hover, .adminmenu_0:hover, .adminmenu_1:hover, .adminmenu_6:hover, .adminmenu_7:hover, .adminmenu_2:hover, .adminmenu_3:hover, .adminmenu_4:hover, .adminmenu_5:hover{
color:#7D92A7;
}
html:
<div class="enveloppe_menuadmin" style="opacity: 1; margin-top: -15px;">
<div class="align_menuadmin">
<div class="env_menuadmin">
<div class="menuadmin">
<div class="adminmenu_00"><span></span></div>
<div class="adminmenu_0"><span></span></div>
<div class="adminmenu_1"><span></span></div>
<div class="adminmenu_5"><span></span></div>
<div class="adminmenu_2"><span></span></div>
<div class="adminmenu_6"><span></span></div>
<div class="adminmenu_7"><span></span></div>
<div class="adminmenu_3"><span></span></div>
<div class="adminmenu_4"><span></span></div>
</div>
</div>
<div class="tiremenuadmin" style="opacity: 1;"></div>
<div class="cover_admin"></div>
</div>
</div>
Demo: http://jsfiddle.net/namkc/
Found:
<div class="adminmenu_00"><span></span></div>