Is it possible to have something like this :
So I have an element
<span class="custom"> 6 </span>
that has this css:
background: lightblue;
color: white;
border-radius: 50px;
When selected.
This creates the circle. But what I need is that this element has also a background with lighter blue, that is not rounded.
Is it possible to some way achieve this and have the element have two background ?
The circle one being on top ?
You can have a div container to have the linear gradient background and another div inside it containing the circular div with 6 in the center aligned using flexbox.
.bg {
background: linear-gradient(to right, #eeeeee 50%, #aaaaff 0%);
width: 80px;
margin: 20px;
}
.custom {
margin: 0 auto;
width: 50px;
height: 50px;
background: #7070ff;
color: white;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="bg">
<div class="custom"> 6 </div>
</div>
You can use linear-gradient with pseudo element to achieve the second background like this :
.custom {
color: white;
padding: 10px;
margin: 50px;
width: 40px;
height: 40px;
box-sizing: border-box;
display: inline-block;
position: relative;
text-align: center;
}
.custom:after {
content: "";
position: absolute;
background: lightblue;
border-radius: 50%;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.custom:before {
content: "";
position: absolute;
top: 0;
right: -20px;
left: -20px;
bottom: 0;
background: linear-gradient(to right, #ccc 50%, red 0%);
z-index: -2
}
<span class="custom">6</span>
You can use two element on each other then set background with opacity lower than 1 for upper element now you have two background.
Related
I'am beginner at frontend, and got some design-layout to train. Designer expects that on hover part of string or even letter will change color Example
I thought about CSS 'clip', but doubt
I change the snippet. Play with font-size.
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-weight: bold;
font-family: sans-serif;
background-color: red;
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 0 0 50%);
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="wrapper1">Hello World!</div>
<div class="wrapper2">Hello World!</div>
</div>
As G-Cyrillus has pointed out, background-clip with value text can be used, it will 'cut out' characters from the background.
In this simple snippet the background is half white, half black and the blue/white background is supplied in a pseudo before element.
Note that the property requires a -webkit- prefix in some browsers.
* {
margin: 0;
}
div::before {
background-image: linear-gradient(to right, blue 0 50%, white 50% 100%);
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
div {
position: relative;
width: 100vw;
height: 500px;
font-size: 50px;
text-align: center;
rmix-blend-mode: difference;
rcolor: white;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, white 0 50%, black 50% 100%);
}
<div>Hello how are you?</div>
So, Thanks for your help, A Haworth , G-Cyrillus! I think, I've found the solution. I experimented with background-clip:text, but in my case it was excess, but I used mix-blend-mode, thanks. I've found an article Taming Blend Modes: difference and exclusion, where explained filter:invert(1). Tried to show in snippet. When hover the cell part of title change color to white. But color of title and hovering background should be the same.My realized layout from designer
.block {
width: 100%;
height: 200px;
padding-top: 10px;
position: relative;
filter: invert(1);
}
h1 {
position: relative;
color: #091C91;
text-align:center;
font-size: 2rem;
z-index: 5;
mix-blend-mode:difference;
filter: invert(1);
}
.list {
display: flex;
justify-content: center;
border: 1px solid red;
height: 130px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.column {
color: white;
flex: 0 1 25%;
border: 1px solid black;
filter: invert(1);
}
.column:hover {
background: #091C91;
}
<div class="block">
<h1>Snippet for Inverting colores</h1>
<div class="list">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
I have the following css for tickmark.
.Icon{
display: inline block;
height: 58px;
width: 29px;
border-bottom: 10px solid blue;
border-right: 10px solid blue;
transform: rotate(45deg);
border-radius: 8px;
}
I am trying to get tickmark with background circle. And learn in the process.
There are several approaches to achieving this effect (including CSS and SVG) but one of the most straightforward and portable is to combine a dash of CSS with the unicode character U+2713:
✓
In CSS, you can include extended unicode characters inside ::before and ::after pseudo-elements, using the format:
content: '\2713'
Working Example:
.tick-within-circle {
position: relative;
width: 48px;
height: 48px;
line-height: 50px;
text-align: center;
font-size: 44px;
font-weight: 900;
border: 8px solid rgb(0, 0, 255);
border-radius: 50%;
}
.tick-within-circle::before {
content: '\2713';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="tick-within-circle"></div>
You can use Inline SVG in CSS. By doing so you can customize it's color, size and position. But for that to work SVG content be url-escaped.
Here's URL-escaped characters I used in snippet below
< => %3C
> => %3E
/ => %2F
# => %23
.tickmark-circle {
position: relative;
width: 35px;
height: 35px;
background-color: #db4437;
border-radius: 50%;
}
.tickmark-circle::before {
content: '';
position: absolute;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="tickmark-circle"></div>
Here are some ideas using just CSS.
This snippet takes your tick drawn using CSS and puts it into an after pseudo element on the element which has the Icon class. It introduces a before pseudo element which has the circular background color.
The pseudo elements are positioned at the end of a div.
This is all just for illustration, it depends on exactly how you want to use it whether you'd have the tick part in an actual element or attached as a pseudo element as here.
A CSS variable is used to describe the width of the left part of the tick itself and CSS calculations used after that to size the background etc. Again it all depends on what you want the final result to both look like and be used for as to whether you alter these settings or not.
.Icon {
display: inline-block;
position: relative;
overflow: visible;
--w: 29px;
font-size: calc(2 * var(--w));
}
.Icon::after {
content: '';
height: calc(2 * var(--w));
width: var(--w);
border-bottom: 10px solid blue;
border-right: 10px solid blue;
transform: rotate(45deg);
border-radius: 8px;
position: absolute;
padding: 10px;
box-sizing: border-box;
left: calc(100% + var(--w));
}
.Icon::before {
content: '';
height: calc(var(--w) * 3);
aspect-ratio: 1 / 1;
background-color: cyan;
background-repeat: no-repeat;
background-size: 200% auto;
position: absolute;
border-radius: 50%;
top: 50%;
left: 100%;
transform: translate(0, -50%);
z-index: -1;
}
<div class="Icon">Correct </div>
There have been several questions regarding some kind of transparent border but not what I am looking for, I think.
It might be very stupid but: Is it possible somehow to have items (those white squares) on a background (the black texture) with those items each having a border that "remove" the background for a 10px (or whatever) border?
So you have a continuous background and each item on top of it "cuts out" some part of it.
A true "transparent" border (like other questions) obviously would just let you see the background, so that is not what I mean.
If not, what would be the way to achieve a responsive design like that?
Sorry, I don't know any other way to explain it. Thank you.
See example/fiddle here: jsfiddle.net/14nn2pLy
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #fd1dfa;
}
#main_header {
position: fixed;
top: 0px;
width: 100%;
height: 200px;
background: url() no-repeat center top;
background-size: contain;
}
#main_footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 200px;
background: url(https://preview.ibb.co/hACMzS/background_footer.png) no-repeat center bottom;
background-size: contain;
}
#icons {
position: fixed;
bottom: 0px;
width: 900px;
height: 75px;
background: url(https://preview.ibb.co/mkPODn/footer_items.png) no-repeat center bottom;
border: 10px;
border-color: rgba( 0, 0, 0, 0);
}
<div id="main_header"></div>
<div id="main_footer">
<div id="icons"></div>
</div>
My thought process
The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.
Example:
.bg {
position: relative;
height: 250px;
width: 500px;
background-image: url(https://i.imgur.com/nRXO8xa.jpg);
}
.border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid black;
}
.no-border {
height: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
margin: auto;
padding: 10px;
background: steelblue;
border: 10px solid #F7F2D5;
}
<div class="bg">
<div class="border">black border</div>
<div class="no-border">"transparent" border</div>
</div>
Solution:
The desired effect is possible using clip-path on the background. Notice that I've changed the HTML and CSS too, otherwise it wouldn't work. The clip-path is used to basically cut out the part of the background image you don't want, so that it becomes transparent, and it is activated on hover.
body,
html {
height: 100%;
margin: 0;
}
body {
background: url(https://images.unsplash.com/photo-1473662712020-75289ee3c5de);
background-size: cover;
}
.container {
height: 140px;
width: 618px;
position: relative;
top: 40%;
margin: 0 auto;
}
.bg {
height: 140px;
width: 618px;
position: relative;
}
.icon {
height: 50px;
width: 50px;
position: absolute;
top: 25.25%;
left: 38.25%;
z-index: 1;
}
.icon:hover+.bg {
clip-path: polygon(0 0, 0 100%, 44% 78.5%, 37.5% 50%, 44% 22%, 50.5% 50%, 44% 78.5%, 0 100%, 100% 100%, 100% 0);
}
<div class="container">
<div class="icon">
<img src="https://i.imgur.com/V2eI4Rm.png" alt="icon">
</div>
<div class="bg">
<img src="https://i.imgur.com/D3V3ZYq.png" alt="background">
</div>
</div>
you could create a image with transparent background and use that as a border-image.
.background {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background-color: #fd1dfa;
z-index: 1 !important;
}
.background:after {
content: "";
display: table;
clear: both;
}
hr {
border: 10px solid white;
position: relative;
top: 100px;
z-index: 5 !important;
}
.center {
position: relative;
width: 50px;
height: 50px;
background-color: #fd1dfa;
color: #ffffff;
padding: 10px;
z-index: 10 !important;
}
.border {
position: relative;
z-index: 8 !important;
margin: 30px;
width: 70px;
height: 70px;
float: left;
background: white;
border: 10px solid transparent;
border-image:
}
<div class="background">
<hr>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
<div class="border">
<div class="center">
text and words
</div>
</div>
</div>
I ran into a little css problem. I'm trying to get skewed edges for a headline, which also workes for multiple lines (see in added screen). Important: The skewed edge should appear on every single line.
I already tried following solutions which didn't work 100%:
:after, :before Elements as Triangles or parallelogram (https://css-tricks.com/examples/ShapesOfCSS/)
.element {
background: red;
line-height: 30px;
width: 100px;
margin-right: 50px;
position: relative;
display: inline-block;
clear: both;
}
.element:after {
background: #f00;
content: "";
display: block;
height: 100%;
transform: skew(-20deg);
position: absolute;
right: -5px;
top: 0;
width: 30px;
}
<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>
--> doesn't work for multiple line because it needs to meet the bottom-right top-left corner
Multi-Line Padded Text (https://css-tricks.com/multi-line-padded-text/) with skewed edges
--> doesn't work to make it skewed on the edges without pseudo-element. same problem like above.
Can you help me with a solution for this problem?
This should work with display inline:
body {
background: black;
}
div {
max-width: 300px;
}
h1 {
line-height: 46px;
color: #fff;
background-image: linear-gradient(110deg, transparent 50%, red 53%), linear-gradient(110deg, red 50%, transparent 53%), linear-gradient(to left, red, red);
background-size: 16px 100%, 16px 100%, calc(100% - 32px) 100%;
background-position: left, right, center;
background-repeat: no-repeat;
display: inline;
padding: 0 16px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div><h1>Some dynamic text on several lines with no special meaning...</h1></div>
No Edge support for now as "box-decoration-break" is not supported (yet?).
Hope this helps you out. Here just applied linear gradient to in before and after element and positioned them absolute. Its height will increase according to the height of relative div.
In case you want to increase the curved area you just need to update width and position them left and right as per the amount of given width. As done in example.
.element {
line-height: 30px;
width: 100px;
margin-right: 50px;
position: relative;
display: inline-block;
clear: both;
psdding: 10px;
background: #f00;
padding: 10px;
}
.element:after, .element:before {
content: "";
width: 10px;
position:absolute;
height: 100%;
}
.element:before {
top: 0px; background: linear-gradient(to top left, #ff0000 50%, transparent 50%);
left: -10px;
}
.element:after {
top: 0px; background: linear-gradient(to bottom right, #ff0000 50%, transparent 50%);
right: -10px;
}
<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>
Looking at you link provided,
This according to me is best answer... ( hope so )
Increasing the element width as I did in below code snippet ,
width: 200px;
Will work fine with the way you want Sample Here
View Code snippet in full screen
.element {
background: red;
line-height: 30px;
padding : 10px ;
width: 200px;
position: relative;
display: inline-block;
clear: both;
}
.element:after {
background: #f00;
content: "";
display: block;
height: 100%;
transform: skew(-10deg);
position: absolute;
right: -5px;
top: 0;
width: 50px;
}
.element:before {
background: #f00;
content: "";
display: block;
height: 100%;
transform: skew(-10deg);
position: absolute;
left: -5px;
top: 0;
width: 10px;
}
<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>
<div class="element">Headline</div>
<div class="element">Another Headline</div>
You can use multiple background and rely on the repeat:
.element {
background: red;
margin:10px;
line-height: 30px;
width: 100px;
padding:0 30px;
display: inline-block;
position:relative;
background:
linear-gradient(to bottom right,red 50%,transparent 0)100% 0/30px 30px repeat-y,
linear-gradient(to top left,red 50%,transparent 0)0 0/30px 30px repeat-y,
linear-gradient(red,red)30px 0/calc(100% - 60px) 100% no-repeat;
}
<div class="element">Headline 1</div>
<div class="element">Headline 2 veeery long</div>
<div class="element">Headline 2 veeery long veeery long veeery long</div>
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;