Due to the skills of others in the community I have created this:
http://codepen.io/anon/pen/NbdoKV
HTML:
.clipboard:after, .clip, .clip:before, .paper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.clipboard {
position: relative;
display: block;
height: 27em;
width: 23em;
margin: 5em auto;
border-radius: 3%;
background: #b69b4c;
}
.clipboard:after {
top: 2.25em;
content: "";
height: 1.5em;
width: 20em;
background: #fefefe;
}
.clip {
z-index: 2;
top: 4.2em;
display: block;
height: 10em;
width: 17em;
border-radius: 50%;
background: #A7A7A7;
}
.clip:before {
content: "";
top: -.5em;
height: 5.3em;
width: 5.3em;
border: 2.2em solid #A7A7A7;
border-radius: 50%;
}
.paper {
z-index: 2;
display: block;
height: 23em;
width: 20em;
margin-top: .5em;
background: #fefefe;
}
.paper:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 3.25em;
width: 3.25em;
}
.paper:after {
content: "";
position: absolute;
height: 1.25em;
width: 1.5em;
}
<i class="clipboard">
<i class="clip"></i>
<i class="paper"></i>
</i>
As you can see this graphic does not scale / respond very well. If I set the width to 100%, everything loses its ratio / perspective. Ideally, I want to be able to set the clipboard width to 100% and everything (height, the clip at top, padding etc) will then scale correctly - much like an image would.
I can see 2 ways of making this responsive:
Changing the HTML/CSS - I have tried and failed
Converting this HTML/CSS to SVG - no idea where to start
How would you make this responsive?
This is an example as svg. There are a few sites where you can draw svgs.
Then you have the paths.
I think the different attributes are self explaining. If you have any questions ask please. I think the best is to read more about this if you want to use it.
Maybe here but there are many more good sources.
<svg height="200" width="450">
<path
id="lineAB"
fill="khaki"
d="M9.778,96h108.445c5.400000000000006,0,9.778000000000006,-4.378,
9.778000000000006,-9.778000000000006v-68.445c0,-5.4,-4.378,-9.778,
-9.778000000000006,-9.778h-108.445c-5.4,0,-9.778,4.378,-9.778,
9.778v68.445c0,5.400000000000006,4.378,9.778000000000006,
9.778,9.778000000000006ZM8,16h112v72h-112v-72Z"
transform="matrix(0.000503985 -1.04456 1.29502 0.000406514 -10.7973 124.73)
translate(-60,150)" />
<path
fill="#C0C0C0"
d="M109.58289641986332,32.006086609509h8v-6.222000000000001c0,-5.3999999999999995,
-4.378,-9.778,-9.778000000000006,-9.778h-30.221999999999994v-6.2219999999999995c0,
-5.4,-4.378,-9.778,-9.778000000000006,-9.778h-20.445c-5.3999999999999995,0,
-9.777999999999999,4.378,-9.777999999999999,9.778v6.222000000000001h-30.222c-5.3999999999999995,
0,-9.778,4.378,-9.778,9.777999999999999v6.222000000000001h112ZM45.58289641986323,
8.006086609509033h24v8h-24v-8Z"
transform="matrix(0.560377 0.00141111 -0.00141111 0.560377 25.8245 -9.95107)
translate(340,90)"/>
Now you only need to adjust the height and with
respectively adding a scale at the transform attribute.
Related
I made my image blurred when you hover over it but every time I try to make the image clickable where it redirects to a new link, the image disappears on Chrome. How can I fix this?
This is the code I have right now for my blurred image:
<div class="textWithBlurredBg2">
<img src="https://taylorsdigigracelim.files.wordpress.com/2014/04/week-4-practical-ex-1.jpg"> </a>
<h2>travel</h2>
</div>
(that's my code in HTML)
.textWithBlurredBg2 {
width: 300px;
height: 200px;
display: inline-block;
margin: 4px;
position: relative;
transform: translate(370px, 200px);
}
.textWithBlurredBg2 img {
width: 100%;
height: 100%;
border-radius: 4px;
transition: .3s;
}
.textWithBlurredBg2:hover img{
filter: blur(2px) brightness(90%);
box-shadow: 0 0 9px #DA70D6;
}
.textWithBlurredBg2 :not(img) {
position: absolute;
top: 30%;
z-index: 1;
color: #fff;
text-align: center;
width: 100%;
}
(That's my code in CSS)
I'm creating a button with rounded corners using SVG (I have to use SVG).
So I succeed to make it responsive related to his parent element #btnTour which I put a width and a height on. But I always have a gap between this #btnTour and the path of my SVG I think it's related to the viewbox but after reading bunch of articles about it I still can't figured out how to solve my issue.
Thanks for your help.
#btnTour{
display: inline-block;
background: none;
border: none;
outline: none;
position: relative;
margin: 1em;
padding: 0;
width: 192px;
height: 70px;
text-decoration: none;
}
#svgContainer{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
border: dotted 1px red;
}
#btnTourText{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
margin: 0;
text-align: center;
z-index: 100;
font-size: 25px;
color: #2b5e9d;
font-weight: 600;
white-space: nowrap;
}
<a id="btnTour" href="page2.php">
<div id="svgContainer">
<svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none">
<path id="svgBtn" style="fill:none;stroke:#2b5e9d;stroke-width:2;" d="M286.5,62.5C286.5,90.39099999999999,263.891,113,236,113C236,113,171.64499999999998,113,150,113C128.355,113,64,113,64,113C36.109,113,13.5,90.39099999999999,13.5,62.5C13.5,62.5,13.5,62.5,13.5,62.5C13.5,34.609,36.109,12,64,12C64,12,128.35500000000002,12,150,12C171.645,12,236,12,236,12C263.891,12,286.5,34.609,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5"></path>
</svg>
</div>
<p id="btnTourText">Go on a Tour</p>
</a>
yes, you have to set the view box to fit the path ( eg. something like viewBox="12.5 11 275 103"); you can do it programmatically via js ( compute the bounding box to the to be fit svg element ) or set/get it from your preferred svg authoring app...
I want to add some pizzazz to some banners... my banners are simply an h1 element with a background color property that stretches the legth of the containing element.
Here is my CSS:
.banner {
position: relative;
z-index: 1000;
padding: 20px;
}
.banner-blue {
background-color: #93DEFF;
color: #222222;
}
.banner-yellow {
background-color: #FFF072;
color: #777777;
}
.banner-red {
background-color: #FF356B;
color: white;
}
And I would apply it like this:
<h1 class="banner banner-yellow">I'm a banner!</h1>
My problem:
I want to overlay a copy of the banner background but change the color and rotate it slightly on the z-axis to get an effect like this.
However I can't work out how to do that using the ::before (or is it ::after) psuedo-elements to do that... here is what I have tried:
.banner-red::before {
display: block;
position: absolute;
padding: 20px;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(3deg);
width: 100%;
margin-left: -30px;
}
Here is a codepen of it running: not looking too good: https://codepen.io/jethazelhurst/pen/JyKqRB
Just rotate your box in the opposite direction: transform: rotateZ(-3deg);
You can set the top and left value in order to place your rotated box correctly.
.banner-red::before {
display: block;
position: absolute;
content: "";
background-color: rgba(255,30,60,0.4);
transform: rotateZ(-3deg);
width: 102%;
height: 97px;
margin-left: -30px;
top: 2px;
}
Of course you can change the colors: your horizontal box is #91c6ff and the rotated one is #91c6ff. Also, they are transparent.
Here's a fork of your project: https://codepen.io/anon/pen/zdBVGe
And with the colors:
Make a element with another child element for text, span for example. Then you can set z-index on span so that text is above pseudo element.
div {
background: #91C6FF;
padding: 25px;
margin: 40px;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(135, 171, 255, 0.7);
transform: rotate(-4deg);
}
span {
position: relative;
z-index: 2;
font-size: 30px;
}
<div><span>Lorem ipsum dolor.</span></div>
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/