I'm trying to make some text look a little more 3D by adding a shadow to it, but I can not make the shadow appear behind the text, I have tried switching it around but it always break in weird ways, the shadow is either on top or totally messed up, here is a JS Fiddle with my exact code:
https://jsfiddle.net/2azp5z36/2/
As you see the problem is that the shadow is in front of the text instead of behind the text.
If you have a better suggestion than my current method I'm interested, as long as the end result look the same (except for the placement of the shadow, obviously),
I only have 1 requirement: the code for the solution must only use: HTML, CSS and/or JavaScript (preferably HTML5 & CSS3).
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: 0;
}
<h1 class="CV" data-text="CV">CV</h1>
It's because you're setting the z-index of the h1. Just leave it as z-index:auto and the negative z-index should work as intended. Note that based on the properties you're using, this effect will only work in a few browsers.
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: auto;
}
<h1 class="CV" data-text="CV">CV</h1>
You're setting the text color to be transparent through -webkit-text-fill-color so that the background image can be used as the fill. The 'stacking order' means that the text itself is above anything in the background. The text-shadow is a property of the text, so it will also be above the background. I don't think this approach will work.
You'd probably need at least 1 more HTML element to make this work— would that be an acceptable solution?
Ok so, I hope this is what you wanted. I've tried to do it using 2 overlapping <h1> tags. Here is the JS Fiddle. Here is the code:
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
h1.CV2:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV2 {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
<h1 class="CV2" data-text="CV">CV</h1>
<h1 class="CV" data-text="CV">CV</h1>
Thanks everyone for your suggestions, they have been very helpful!
The final solution that I will use comes from: Michael
in this thread: How do I combined CSS text-shadow and "background-image: -webkit-gradient"
And special thanks to: Stephen C
For pointing that tread out for me.
Additional thanks to: Joseph Marikle & Sankarsh Makam
For interesting working code solutions.
The final solution that I will use comes from Michael above and looks like this:
https://jsfiddle.net/2azp5z36/6/
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 5px 5px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
<h1 class="gradient-shadow" title="Hello World">
<div>Hello World</div>
</h1>
Related
I`m trying to make hover effect on a box like this image
I've tried using transparent top and left border but all i got was bottom border extra triangle pointing the other direction like in this
.news:hover {
transform: translateY(20px);
transform: translateX(-20px);
border-left: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: solid #F4698D 20px;
border-right: solid #F4698D 20px;
}
One solution would be to create a pseudo element using ::after. It sits in the bottom left, overlaying the border, and has it's own gradient background that resembles a triangle.
Because the width of the border is used to determine the height, width, and offset of the overlaying element, I've elected to store that number as a CSS variable.
:root {
--border-width: 10px;
}
div {
padding: 50px;
border-bottom: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
position: relative;
}
div:hover {
border-color: red;
}
div:hover::after {
content: '';
position: absolute;
display: block;
height: var(--border-width);
width: calc(2 * var(--border-width));
bottom: calc(-1 * var(--border-width));
left: 0px;
background: linear-gradient(to right top, white 50%, red 50%);
z-index: 2;
}
<div>Hover me!</div>
Borders create that shape that resembles a frame.
Another solution for this effect is to use :after and :before pseudo elements. You could let them prepared with opacity: 0, and then when hovering the element, make it to opacity: 1. Like this:
.news {
postision: relative;
}
.news:before { // the bottom line
bottom: -20px;
Left: 0;
height: 20px;
width: 100%;
}
.news:after { // the right line
right: -20px;
top: 0;
height: 100%;
width: 20px;
}
.news:after { // here are properties for both pseudo elements
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
transition: .32s;
}
.news:hover {
transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
opacity: 1;
visibility: visible;
}
Hope it helps.
So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
In theory, this is what I want it to look like:
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.
There are a ton of different ways to do this.
Here is a CSS only way.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
Hope this helps!
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
background: #e8e8e8;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hello from the other side!";
}
.title-card.caption-b::before {
content: "It's tricky!";
}
.title-card.caption-c::before {
content: "Don't call it a comeback!";
}
.title-card.logo-a {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}
<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>
I'm trying to make a transparent glass-like box, something similar to what is shown in this image:
I don't know whats wrong with my CSS because it looks like a white box (with low opacity) shown, basically it doesn't have the look or feel as shown in the picture. I was wondering if anyone knows how to achieve something like this?
My CSS (I tried a couple of things like blur or opacity but neither one yields the result I want):
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
div.glass-bg-color::before {
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: absolute;
// filter: blur(4px);
// box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
opacity: 0.3;
background-color: rgba(255,255,255, 1);
}
.glass-bg-color {
color: white;
position: relative;
}
<div class="body-bg-color">
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
</div>
The example you've shown uses a radial gradient as the background of the underlying element, and transparent white for the "glass" effect. For example I've created an elliptical background gradient ( by modifying an example on MDN) placed as a transparent image on top of a solid background of the body.
The glass effect is now just a transparent white background on a container element. I've used an inline-block for demonstration:
body {
margin: 0px;
width: 100vw;
height;: 100vh;
background-color: #00467F;
background-image:
radial-gradient(ellipse farthest-corner at 80vw 15vh ,
rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
);
background-attachment:fixed;
}
.glass {
background-color: rgba( 255,255, 255, 0.1); /* transparent white */
color:white;
display:inline-block;
border-radius: 15px;
padding: 10px;
}
<div class="glass"
style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
Hello Folks!
</div>
(Note the CSS for the body background can produce unwanted scrollbars if the body margin is non zero. An alternative to zero width body margins may be to create a fixed position background element with a z-index of -1. Previous discussion of the issue may be found at CSS3 gradient background set on body doesn't stretch but instead repeats? which I have already found useful.
The answer is really just applying white with a low opacity on the box backgrounds:
The CSS:
body {
position: relative;
width: 100%;
background: #00467F;
background: -webkit-linear-gradient(left, #A5CC82, #00467F);
background: -moz-linear-gradient(left, #A5CC82, #00467F);
background: -o-linear-gradient(left, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
.glass-bg-color {
position: relative;
display: inline-block;
float: left;
margin: 20px;
width: 200px;
height: 200px;
border-radius: 4px;
text-align: center;
background-color: rgba(255,255,255,.08);
color: white;
}
The HTML:
`
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
`
See the fiddle here: https://jsfiddle.net/4y8bx2eg/
Your current background opacity is set to 1. It should be closer to 0.2. And your spread-radius of the box-shadow is 3000px, which should be set more relative to the size of your elements, I'd also suggest changing the blur-radius a bit, which is currently zero.
Is this more like what you are looking for?
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
text-align: center;
}
.glass-bg-color {
box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
background-color: rgba(255,255,255, 0.2);
color: white;
position: relative;
display: inline-block;
padding: 10em;
}
I am looking to make a triangle button in the top-right of my website (fixed position). It's just a icon over top of a background colour with hover effect. I was wondering if there is a way to get a angled div or if it needs to be a background image?
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
HTML
...
<div id="top-btn">icon</div>
EDIT - visual representation. positioned top right of window
Updated for triangle on right with rotated text
Use the border trick to create a triangle in CSS: DEMO
HTML:
<div id="corner-triangle">
<div class="corner-triangle-text"><span class="corner-triangle-firstline">Free</span><br>Shipping!</div>
</div>
CSS - note comments for adjusting triangle size and color; also, remove transform: rotate(45) lines if you don't want the text rotated:
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0 200px 200px 0; /* adjust for size of triangle */
border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
position: fixed;
top: 0;
right: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
-webkit-filter: drop-shadow(0 1px 9px #000000);
filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
position: relative;
font-size: 2.1em;
top: 0;
right: -90px;
font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
font-weight: 200;
line-height: 1.1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
text-decoration: none;
}
Basically, you create an element with width and height of zero, and use borders to create the triangles.
[]
This article shares some code.
https://css-tricks.com/snippets/css/css-triangle/
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.triangle {
border-width: 50px;
border-style: solid;
border-color: red red transparent transparent;
position: fixed;
top:0;
right:0;
width:0;
height:0;
}
Working fiddle.
If you're asking how to make a triangle without using an image, there's these html characters: ▲ ▲ and ▼ ▼
You can also make triangles in css by making an element with a width and height of zero, and giving it a border on only 3 sides, with 2 sides being transparent.
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
More detail here
https://css-tricks.com/snippets/css/css-triangle/
This is what I came up with:
.corner{
width: 0;
height: 0;
border-top: 50px solid rgb(227, 37, 37);
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right:50px solid rgb(227, 37, 37);
float:right;
}
.corner:hover{
border-color: #A00404 #A00404 transparent transparent;
transition: border-color 1s;
}
Here is the JSfiddle demo
Depending on what you need to do with it, the easy way would be to use a character like the following: ▴
You cannot just copy and paste it though. Use the following in your code to display this character:
▴
It may not suit every situation, but I've used it. It's as easy to place as any other text, and you can easily resize it, apply colour, background, or shadow to it, because it's just text.
Here's a list of all the characters you can use, depending of course on the font you're using, which will be a limitation of this method I think:
http://dev.w3.org/html5/html-author/charref
Another limitation would be if you want to place text or an icon on top of it. I'm sure it's possible, but there are better methods if that's your intention.
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.