I'm trying to add a hover effect for a menu -
It should be pretty simple but I haven't found any scss or css work arounds yet... Below is an image that shows specifically what I'm talking about.
A simple linear-gradient will do it:
.container {
background:grey;
padding:10px;
}
.nav {
display: inline-block;
padding: 10px;
color: #fff;
}
.nav:hover {
background: linear-gradient(to bottom right, transparent 50%, red 51%);
}
<div class="container">
<div class="nav">TEXT</div>
<div class="nav">long TEXT</div>
<div class="nav">A</div>
<div class="nav">BBBBBBBBBBB</div>
</div>
You can use clip-path to shape the triangle, although browser support Eh.
button {
background: #112b1bb8;
border: 1px solid black;
padding: 10px 40px;
position: relative;
}
button:hover:before {
content: '';
width: 100%;
height: 100%;
background: grey;
position: absolute;
top: 0;
left: 0;
z-index: -1;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
<button>Brand</button>
<button>Link Link</button>
<button>O</button>
Related
Hi i am trying to make the following:
They triangles should be about 40% in height of the container, and 50% in width, so they meet in the middle.
I have been trying to make something similar.. but unsuccessfull so far..
And looking around, i have found nothing i could use so far.
my code:
div {
height: 373px;
width: 0px;
margin: 26px;
display: inline-block;
}
.left {
border-bottom: 100px solid #ff0;
border-left: 320px solid transparent;
}
.right {
border-bottom: 100px solid #f00;
border-right: 320px solid transparent;
}
header {
border: 2px solid black;
width: 50%;
height: 500px;
}
<header>
<div class="right"></div>
<div class="left"></div>
</header>
hoping for someone smarter than me to see where i should go from here...
Use background coloration like below:
.box {
height:300px;
background:
/* Right bottom triangle*/
linear-gradient(to bottom right,transparent 49.5%,blue 50%) bottom right,
/* left bottom triangle*/
linear-gradient(to bottom left ,transparent 49.5%,red 50%) bottom left ,
yellow;
background-size:50% 40%; /* Width height*/
background-repeat:no-repeat;
}
<div class="box">
</div>
Related answer for more details: How do CSS triangles work?
Another idea with pseudo elements (that you can replace with common elements) in case you want to have different elements.
.box {
height: 300px;
background: yellow;
position: relative
}
.box:before,
.box:after {
content: "";
position: absolute;
height: 40%;
width: 50%;
bottom: 0;
}
.box:before {
left: 0;
background: linear-gradient(to bottom left, transparent 49.5%, red 50%);
}
.box:after {
right: 0;
background: linear-gradient(to bottom right, transparent 49.5%, blue 50%);
}
<div class="box">
</div>
Since you need percent values, you can use clip-path. Beware that it may not be supported fully on some browser https://caniuse.com/#feat=css-clip-path and for some you may need prefixes (e.g. -webkit-clip-path)
.wrap {
height: 200px;
width: 100%;
position: relative;
background: #333;
}
.triangle {
background: red;
clip-path: polygon(0 40%, 0% 100%, 100% 100%);
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 50%;
}
.triangle.tr-right {
left: auto;
right: 0;
clip-path: polygon(100% 40%, 0% 100%, 100% 100%);
}
<div class="wrap">
<div class="triangle tr-left"></div>
<div class="triangle tr-right"></div>
</div>
JSFiddle
Clip-path created with Clippy
* {
box-sizing: border-box;
}
.triangular-pointer-box {
display: flex;
align-items: center;
background: #161616;
padding: 20px;
padding-left: 120px;
height: 200px;
position: relative;
width: 80%;
}
.triangular-pointer-box > h3 {
color: #fff;
}
.triangular-pointer-box:after {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #161616;
position: absolute;
right: -100px;
top: 0;
}
.triangular-pointer-box:before {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #ffffff;
position: absolute;
left: 0;
top: 0;
}
<div class="triangular-pointer-box">
<h3>Title goes here</h3>
</div>
I created a triangle like so using css:
.box {
width: 0;
height: 0;
border-style: solid;
border-width: 540px 964px 540px 0;
border-color: transparent #007bff transparent transparent;
}
But I am trying to make my triangle look like this:
My question is how do I make the top and bottom more edge to edge?
You could use :after pseudo element to create one square and then use rotate and translate transforms.
.element {
display: inline-block;
background: lightgreen;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.two {
margin-left: 30px;
width: 300px;
height: 300px;
}
.element:after {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #30373F;
transform: rotate(45deg) translate(10%, -20%);
}
<div class="element"></div>
<div class="element two"></div>
You can easily do this with gradient:
.box {
width:200px;
height:200px;
background:
linear-gradient(red,red) right/30% 100%,
linear-gradient(to top left,red 49.8%,transparent 50%) top left/70% 50%,
linear-gradient(to bottom left,red 49.8%,transparent 50%) bottom left/70% 50%,
url(https://picsum.photos/600/600?image=1069) center/cover;
background-repeat:no-repeat;
}
<div class="box">
</div>
I want to make to reflection to a solid colour reflection with fade off at the bottom instead of the image itself, is it possible?
http://codepen.io/vincentccw/pen/iGrmq
img{
-webkit-box-reflect: below -2px
-webkit-gradient(linear,
center top,
center bottom,
from(transparent),
to(white));
}
Were you looking for this? Live demo (click).
Sample Markup:
<div class="img-container">
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
</div>
JavaScript:
body{
background: black;
}
img {
-webkit-box-reflect: below 0px;
}
.img-container {
display: inline-block;
position: relative;
}
.img-container:after {
content: '';
display: block;
top: 100%;
bottom: -100%;
left: 0;
right: 0;
position: absolute;
background: linear-gradient(to bottom,
transparent 0%,
#FFF 82%
)
}
I have some divs that have rounded corners and colored borders. I want the borders of the div to have the gradient so that it will change when the user hovers overs the div.
I have found all of the sites on how to use the gradient (http://css-tricks.com/css3-gradients/, http://gradients.glrzad.com/, etc.) but I still can't figure out how to get this to work for rounded edge borders.
Will someone please guide me to a site that describes how to do this or even help me with the code?
Here is the SIMPLE solution for that :
Outcome : CSS rounded corners with gradient border
.yourClass {
display: inline-flex;
border: double 6px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
background-origin: border-box;
background-clip: content-box, border-box;
}
You can nest two elements and let the outer div act as the gradient border then you can work around this problem, example:
<div class="container">
<div class="content">
...
</div>
</div>
And then in your CSS:
/*
unprefixed for conciseness, use a gradient generator por production code
*/
.container {
background: linear-gradient(red, black);
}
.content {
background: white;
padding: 10px;
}
For a working example take a look at https://stackoverflow.com/a/7066176/524555
Using a :before element is the most ideal solution in my opinion, as you then have full control via CSS and the HTML markup stays clean.
.circle {
width: 300px;
height: 200px;
background: white;
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
width: 100%;
height:100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}
You can tweak the padding and the top and left values to adjust the border thickness.
Here is a JSFiddle that shows a practival example: http://jsfiddle.net/wschwarz/e2ckdp2v/
I know this answer was already answered and accepted, but I wanted to post a different approach I used, because this accepted answer wouldn't work if the button was over a background with another gradient, or an image, for example.
My solution works only for horizontal gradients and rounded-cornered (but not circle) buttons. I used both the "border-image" property and pseudo-elements to achieve this effect:
The button would have only the top and bottom "border-image" borders. The left and right borders would be completed with pseudo-elements.
Here's a working example:
HTML:
<div class="background">
<button class="button">
My button!
</button>
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.background {
background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
width:500px;
height:500px;
display:flex;
align-items:center;
justify-content:center;
}
.button {
box-sizing:border-box;
display: inline-block;
padding:0.5em 0;
background:none;
border:none;
border-top:2px solid #0498f8;
border-bottom:2px solid #0498f8;
border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
border-image-slice: 1;
position: relative;
text-transform: lowercase;
transition:background 0.3s;
color: #fff;
cursor: pointer;
font-size:1em;
&:before,
&:after {
content: '';
display: block;
width: 2em;
height: calc(100% + 4px);
border-radius: 3em 0 0 3em;
border: 2px solid #0498f8;
position: absolute;
border-right: none;
transition:background 0.3s;
left: -2em;
top: -2px;
}
&:after {
border-radius: 0 3em 3em 0;
border: 2px solid #4db848;
position: absolute;
border-left: none;
left:auto;
right: -2em;
top: -2px;
}
&:hover {
background:rgba(0,0,0,0.3);
&:after,
&:before {
background:rgba(0,0,0,0.3);
}
}
}
https://jsfiddle.net/fnbq92sc/2/
border="solid 1px transparent"
background="linear-gradient(Canvas, Canvas) padding-box, linear-gradient(red, blue) border-box"
borderRadius="1rem"
second part for background is the gradient you desire ^
I'm trying to figure out if there's a way to do this with CSS: I have a container div with a border-radius of 50% (circular). Inside of that is a rectangular div with a height of 30% positioned at the bottom of the container, and I want to be able to mask that off so that anything outside of the container's rounded border radius doesn't show. How do I accomplish this? Attached is a screenshot of what's currently happening, and this is my code:
<div id="coupon_container">
<div id="meter_container">50c off</div>
</div>
#coupon_container {
position: fixed; right:0; top:0; z-index: 100; color: #fff; width:170px; height: 120px;
#meter_container {
position: absolute; width: 110px; height:110px; .round; background: #greenDk; border:5px solid #fff; left: 60px; overflow: hidden;
.meter_level { width: 100%; height:30%; position: absolute; bottom:0; text-align: center; font-size: 1.6em; background: #limeLt; }
}
}
I really like the gradient solution that bookcasey has posted. However, compatibility may be a drawback as IE9 doesn't support CSS gradients. So another solution would be this one:
demo
The idea is to use a top padding of 70% instead of absolute positioning.
HTML:
<div id="coupon_container">
<div id="meter_container">50c off</div>
</div>
CSS:
#coupon_container {
overflow: hidden;
width: 8em; height: 8em;
border-radius: 50%;
background: green;
}
#meter_container {
margin: 70% 0;
height: 30%;
text-align: center;
background: lime;
}
You can achieve the effect you want using CSS3 gradients:
#coupon_container {
width: 100px;
height: 100px;
border-radius: 100px;
background: -webkit-gradient(linear, 50% 0%, 50% 70, color-stop(100%, #fa8072), color-stop(100%, #ff0000));
background: -webkit-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: -moz-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: -o-linear-gradient(top, #fa8072 70px, #ff0000 70px);
background: linear-gradient(top, #fa8072 70px, #ff0000 70px);
position: relative;
}
#meter_container {
width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}
Demo
I could be totally missing something, but couldn't you just add "overflow: hidden;" to the round element, #coupon_container?