I would like to add an arrow effect to Angular Material cards (see image below) and I am not sure how to do so. I have set up a fiddle for help.
https://jsfiddle.net/er1187/rng1pv4u/1/
<md-card flex layout-align='center center'>
<md-card-content>
TESTING
</md-card-content>
</md-card>
Create that using transparent border & box shadow.
md-card:after {
content: "";
position: absolute;
box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 35px;
left: 48%;
border-width: 15px;
border-style: solid;
border-color: transparent #FFF #FFF transparent;
}
Change border width according to what size of that that border made triangle you need (& accordingly you've to handle its position top value).
https://jsfiddle.net/shantanu_k/a8omvs2b/1/
Related
I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
currently i'm have issue with generating html with gatsby-transformer-remark.
The problem is, converted markdown to html has images with a link, and transformed to sth like :
<a class="gatsby-resp-image-link" href="/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75%; position: relative; bottom: 0px; left: 0px; background-image: url("data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMB/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEEBf/aAAwDAQACEAMQAAABgik0dXC//8QAGRABAAMBAQAAAAAAAAAAAAAAAQACEhEy/9oACAEBAAEFAkqW2DlnRj73yf/EABcRAQADAAAAAAAAAAAAAAAAAAAREkH/2gAIAQMBAT8B1WX/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQL/2gAIAQIBAT8Bi6f/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIRISIxMv/aAAgBAQAGPwK9GNocyS8hCj//xAAbEAADAQADAQAAAAAAAAAAAAABESEAMUGBof/aAAgBAQABPyGxNMfrLHmCDZmAzzvJJDjEQCHv/9oADAMBAAIAAwAAABDIL//EABYRAQEBAAAAAAAAAAAAAAAAAAERAP/aAAgBAwEBPxARhylZv//EABgRAAIDAAAAAAAAAAAAAAAAAAABESFR/9oACAECAQE/EFoktI//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAxIWFBcYHh/9oACAEBAAE/EEbMLQ0fMHDVaPIXyI4pk4JUnWacNCtO8ojDE9TGIYES7/Jn/9k="); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
<img class="gatsby-resp-image-image" alt="Chinese Salty Egg" title="Chinese Salty Egg" src="/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg" srcset="/static/8058f3f26913fea3b6a89a73344fe94a/8ee9c/salty_egg.jpg 148w,
/static/8058f3f26913fea3b6a89a73344fe94a/ebbe7/salty_egg.jpg 295w,
/static/8058f3f26913fea3b6a89a73344fe94a/c739e/salty_egg.jpg 590w,
/static/8058f3f26913fea3b6a89a73344fe94a/5413e/salty_egg.jpg 885w,
/static/8058f3f26913fea3b6a89a73344fe94a/4efde/salty_egg.jpg 1180w,
/static/8058f3f26913fea3b6a89a73344fe94a/2b40c/salty_egg.jpg 2048w" sizes="(max-width: 590px) 100vw, 590px" loading="lazy" style="opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">
</a>
starter blog demo hello-world post has this link on image.
I am looking a way to remove that link and use medium-zoom package instead.
thanks in advance
I have designed a tooltip using only html and css.I cannot use bootstarp.Below is my code for tooltip.
<div class="box">
<h3>Tooltip</h3>
</div>
h3 {
text-align:center;
line-height:33px;
}
div.box {
height:100px;
width:200px;
background-color:#eee;
border:1px solid #aaa;
position:relative;
top:50px;
left:50px;
border-radius:7px;
}
.box:before {
position:absolute;
right:-20px;
top:5px;
content:'';
height:0;
width:0;
border:10px solid transparent;
z-index:1;
}
.box:after{
position:absolute;
right:-17px;
top:25px;
content:'';
height:0;
width:0;
border-top: 8px solid transparent;
border-left: 8px solid #aaa;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
z-index:1;
}
The tooltip is working.But i want this tooltip to come on button click that is on ng-click as i am using Angular1.
Can anyone please help me how to do this.I am very new to Angular1.
first add a ng-show to your tooltip
<div class="box" ng-show="displayTooltip">
<h3>Tooltip</h3>
</div>
and add ng-click to your button to make displayTooltip true
ng-click="displayTooltip = true"
if you want to make tooltip invisible on button click use
ng-click="displayTooltip = !displayTooltip"
or if you want to make it invisible on mouseleavevent use
ng-mouseleave="displayTooltip = false"
I have two divs side-by-side (inline block). Using Angular's ngAnimate, I want the left div to slide off the screen and the right div to slide over and take it's place.
Right now what happens is the left div slides away, and once that animation completes, the right div jumps over to take it's spot. How do I make it slide over smoothly at the same time?
Here's a Plunker which demonstrates it a lot better than I can explain it:
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk
Here's the css/html:
Css:
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all linear 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
left: -200px;
opacity: 0;
}
Html:
<div>
<button ng-click="hide = !hide">Toggle</button>
</div>
<div class="well">
<div ng-hide="hide" class="column" style="background-color: lightblue; height: 150px;">
</div>
<div class="column">
This column does not move smothly as the column to the left slides offscreen.
</div>
</div>
Here's that Plunker again, in case you scrolled to the bottom looking for the Plunker link :)
https://plnkr.co/edit/ZrtPPkXlttih15ISgEhk
You simply need to change the width of the column in your transition:
PLUNKR
.well{
overflow-x: hidden;
overflow-y: hidden;
}
.column{
display: inline-block;
width: 100px;
vertical-align: top;
transition: all ease-in-out 1.0s;
left: 0px;
position: relative;
opacity: 1;
}
.column.ng-hide{
width: 0;
left: -200px;
opacity: 0;
}
The reason it wasn't working for you, is due to the fact that the width is remaining the same until the div becomes hidden. This prevents the right column from sliding over as the left column slides out of view. By setting the transition to adjust the width, you can give it that "sliding" effect along the right-edge.
I also changed the animation from linear to ease-in-out to give it a nicer transition
Are there any clear button included with md-input of type Search? I know that I can just add an clear button outside or the search input component, but I would rather like to get it as part of the input field.
I solve it using a negative margin-right
.search {
md-content.md-default-theme {
overflow: visible;
}
.search-cancel {
color: white !important;
fill: white;
border: none;
width: 16px;
height: 16px;
margin: 8px 0 0 -36px;
overflow: visible;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s linear;
background: rgba(0, 0, 0, 0.3);
&:hover {
background: rgba(255, 0, 0, 0.8) !important;
}
}
}
<div layout="row" class="search">
<md-content flex="90" layout-padding>
<md-input-container md-no-float>
<md-icon md-svg-icon="search" class="name"></md-icon>
<input ng-model="search" type="search" title="Search" placeholder="Search">
</md-input-container>
</md-content>
<md-content flex layout-padding>
<md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel"
ng-click="search=''"></md-icon>
</md-content>
</div>
The containing md-content also needs overflow-visible so that the icon is not clipped.
This is not possible with existing version of angular material (v0.9.0) but is targeted to v0.10.0. See more information here: https://github.com/angular/material/issues/2802#issuecomment-101764802
However, there is a Angular directive that might be used as a workaround. https://github.com/dcohenb/angular-clear-input