In the following css I am trying to make the custom component height be 50px. But, takes the height of the child element instead. How can I give the custom component the height of 50px? The custom component is wcia-slider and I am setting the height with css to 50px. Then the child element has height of 100%. The wcia-slider height is being set to the childs height of 100%. I am trying to set the wcia-slider to be 50px via css settings. thank you.
<!DOCTYPE html>
<html>
<head>
<style> 1
wcia-slider {
display: inline-block;
position: relative;
border-radius: 3px;
height: 50px;
width: 500px;
background-image: linear-gradient(45deg, #ccc 25%,
transparent 25%),linear-gradient(-45deg, #ccc 25%,
transparent 25%),linear-gradient(45deg, transparent 75%,
#ccc 75%),linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.bg-overlay {
width: 100%;
height: 100%;
position: absolute;
border-radius: 3px;
background: linear-gradient(to right, #ff0000 0%, #ff000000 100%);
}
.thumb {
margin-top: -1px;
left: 250px;
width: 5px;
height: calc(100% - 5px);
position: absolute;
border-style: solid;
border-width: 3px;
border-color: white;
border-radius: 3px;
pointer-events: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<wcia-slider backgroundcolor="#0000ff" value="180"></wcia-slider>
</body>
<script>
class Slider extends HTMLElement {
connectedCallback() {
this.innerHTML = '<div class="bg-overlay"></div><div class="thumb"></div>'
}
}
if (!customElements.get('wcia-slider')) {
customElements.define('wcia-slider', Slider);
}
</script>
</html>
Related
Im trying to implement a design for Anki cards, I made in Figma, in CSS.
This site does a great job explaining how to accomplish the background blur without backdrop-filter (not supported in Anki). But so far I was not able to figure out how to add a radial-gradient over the background image before I blur it (to add a directional light effect).
The main Problem seems to be the fact that background: inherit; is used to align the background images. And I don't quite get how to align them without the inherit option.
So, is there a way to get the gradient "included" in the blur?
Here is the code from the tutorial (in case the link breaks). And this is the codepen.
body {
background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
/* Keep the inherited background full size. */
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 30rem;
height: 20rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
background: inherit;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
margin: -20px;
}
<div class="container"></div>
Use CSS variable to store the image and be able to add your gradient:
body {
--img: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3);
background: var(--img) center/cover fixed no-repeat;
display: grid;
place-items:center;
height: 120vh;
}
.container {
width: 30rem;
height: 20rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
position: relative;
z-index: 1;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
background:
radial-gradient(transparent, red), /* your background here */
var(--img) center/cover fixed no-repeat;
z-index: -1;
inset:0;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
margin: -20px;
}
<div class="container"></div>
Hi Here I'm trying to add a speech bubble at the bottom left I used clip-path but the problem is I unable to adjust the pixels properly to look clear and exactly what I want. Can anyone suggest to me how to achieve it and any other alternate way to do it?
My code
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 147px!important;
height: auto;
background: transparent;
border: 4px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
}
.tolltip:after {
content: "";
position: absolute;
left: -4px;
bottom: -38px;
width: 13px;
height: 72px;
clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
background: white;
}
.tolltip:before {
content: "";
position: absolute;
left: 8px;
right: 0px;
bottom: 0;
border-bottom: 4px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>
Trying to achieve this
Here is a different idea:
.tolltip {
width: 147px;
margin: auto;
position: relative;
padding: 10px;
}
.tolltip:before,
.tolltip:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border: 5px solid #fff;
}
.tolltip:before {
top: 0;
right: 0;
border-radius: 15px 15px 15px 0;
clip-path: polygon(0 0, 100% 0, 100% 100%,
25px 100%, /* 25px = after width + border width */
25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
0 calc(100% - 10px),
0 100%);
}
.tolltip:after {
top: 50%;
width: 20px; /* adjust this */
border-top: 0;
border-right: 0;
transform-origin: right;
transform: skewY(-40deg); /* add this */
}
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="tolltip">
<h3>content</h3>
</div>
I'm looking to achieve this multiple underline effect and figured out that using box-shadows would be the best way to do it. Specifically, I tried doing this and was successful:
I used the following CSS to do it:
h1{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
float: left;
}
However, I'd like to achieve an effect to turn specific underlines on and off as required. So I came up with this and added the classes to my HTML:
h1{
float: left;
}
.red{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}
But the effect that it produced was this:
I tried adding the classes in different orders and also adding them dynamically using JavaScript, but I am still getting the same result. Am I doing anything wrong, or is there an alternative way to achieve the turn-on turn-off effect?
This could be accomplished with pseudo elements:
h1 {
display:inline-block;
border-bottom:2px solid #e8353b;
position:relative;
}
h1:before {
content:"";
height:2px;
width:100%;
background:#2762be;
display:block;
position:absolute;
bottom:-6px;
}
h1:after {
content:"";
height:2px;
width:100%;
background:#a3514f;
display:block;
position:absolute;
bottom:-10px;
}
<h1>Hello there</h1>
An interesting way using <span>s :)
You can add as many <span> as you want and just extend the colors palette in CSS:
.borders {
display: inline-block;
}
.borders span {
display: block;
height: 2px;
margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */
<h1 class="borders">
Hi there
<span></span>
<span></span>
<span></span>
</h1>
Or if you need only 3 borders and you don't want to insert additional HTML elements:
use a border-bottom for your first class, than :before on your second class and :after on your third class.
h1 {
position: relative;
display: inline-block;
}
.red{
box-shadow: 0 2px 0 red;
}
.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }
.blue:after{
bottom: -6px;
border-bottom: 2px solid blue;
}
.green:before{
bottom: -10px;
border-bottom: 2px solid green;
}
<h1 class="red blue green">Hi there</h1>
You can use linear-gradient, which will be fully transparent.
Note, when combine classes as you did, they doesn't merge those values, the last property set on an element will overwrite any previous, whether they are set in classes with different names or not, hence your line becomes all brown.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green),
linear-gradient(to right, transparent,transparent);
}
h1.blue{
background-image:
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can easily re-position the lines and close any gap by simply leave out the line you don't want.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green);
}
h1.blue{
background-image:
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can actually do this with only 1 pseudo-element.
Here's what I've done (with comments on how to control spacings):
h1 {
display: inline-block;
/* controls the last line */
border-bottom: 2px solid #a3514f;
}
h1:after {
content: "";
display: block;
/* controls space between 1st and 2nd line */
height: 2px;
width: 100%;
/* controls space between 2nd and 3rd line */
margin-bottom: 2px;
border-bottom: 2px solid #2762be;
border-top: 2px solid #e8353b;
}
<h1>Hello there</h1>
This was written based on #APAD1's answer, taking his idea of using borders.
This method offers the advantage of the whole ::after being part of the content of the <h1>, instead of being outside.
You can add up to five lines using pseudoelements and borders.
Each class adds a new line.
*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
display: inline-block;
padding-bottom: 2px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 6px;
bottom: -10px;
}
h1:after {
bottom: -18px;
}
.one {
border-bottom: 2px solid red;
}
.two:before {
border-top: 2px solid blue;
}
.three:before {
border-bottom: 2px solid green;
}
.four:after {
border-top: 2px solid brown;
}
.five:after {
border-bottom: 2px solid orange;
}
<h1 class="one two three four five">Lorem ipsum</h1>
Just trying to get as many lines as posible, using pseudos, borders, shadows ...
You get up to 9 lines, that can be set / unset with 9 independent classes.
Some of them need will only work against a solid, known background-color (white in this case)
.base {
font-size: 60px;
position: relative;
display: inline-block;
}
.base:before,
.base:after {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 10px;
padding: 10px 0px;
background-clip: content-box;
}
.base:before {
bottom: -90px;
}
.base:after {
bottom: -170px;
}
.a {
border-bottom: solid 10px lightgreen;
}
.b {
box-shadow: 0px 10px white, 0px 20px green;
}
.c:before {
border-top: solid 10px lightblue;
}
.d:before {
background-color: red;
}
.e:before {
border-bottom: solid 10px yellow;
}
.f:before {
box-shadow: 0px 10px white, 0px 20px green;
}
.g:after {
border-top: solid 10px tomato;
}
.h:after {
background-color: magenta;
}
.i:after {
border-bottom: solid 10px gray;
}
.j:after {
box-shadow: 0px 10px white, 0px 20px brown;
}
<h1 class="base a b c d e f g h i j">Hello world</h1>
I have been working on one project in which i have to style a border of a div inverted to achieve this i can only use css and js i cannot use any plugins.
I have gone through several online posts and similar looking questions on stack but couldnt really find what i want , I am attaching a for reference as well as a fiddle of what i have tried so far.
.outer {
overflow: hidden;
}
.inner {
border: 1px solid #888;
}
.inner i {
width: 40px;
height: 40px;
border: 1px solid #888;
border-radius: 50%;
background-color: #fff;
}
.inner .top {
margin-top: -20px;
}
.inner .bottom {
margin-top: -20px;
margin-bottom: -22px;
}
.inner .left {
float: left;
margin-left: -20px;
}
.inner .right {
float: right;
margin-right: -20px;
}
.content {
min-height: 80px;
}
<div class="outer">
<div class="inner">
<i class="top left"></i>
<i class="top right"></i>
<div class="content"></div>
<i class="bottom right"></i>
<i class="bottom left"></i>
</div>
</div>
Am sure This will help you
Demo: http://jsfiddle.net/mxehp3sh/2/
HTML
<div id="a" class="circle-border">B</div>
CSS
body{background:yellow;}
.circle-border {margin:10px;
display: inline-block;
position: relative;
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#a {
width: 90%;
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
background-image: -moz-radial-gradient(
100% 50%,
circle closest-corner,
transparent 0,
transparent 55px,
transparent 56px,
grey 57px
);
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: -ms-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: -o-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
}
I found myself stuck with this problem: I have game map with following code
Code
.content-right {
width: 50%;
height: 100%;
position: relative;
align-self: auto;
background-color: #44362D;
}
.content-inner-top {
width: 100%;
height: 70%;
background-image: url("http://i.imgur.com/wLJ1Pnt.jpg"); /* map.png */
background-position: left center;
background-size: 100% auto;
-moz-user-select: none;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
}
.content-inner-bottom {
width: 100%;
height: 30%;
margin: 0 auto;
z-index: 9;
text-align: center;
display: block;
position: relative;
top: 10%;
transform: translateY(-10%);
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: relative;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 200px;
}
<div class="content-right">
<div class="content-inner-top">
<div id="position"></div>
</div>
<div class="content-inner-bottom"></div>
</div>
I would like to absolute position #position element on game map, but, I find it impossible because every time I resize browser window height, element goes to another place. Images are shown below.
Images
1st image (normal window)
2nd image (resized window)
What should I do? I cannot find solution via javascript nor jQuery either...
Thanks for your help in advance
I see that there's a top in 'px' but when you decrease the size of window, the image is smaller not only in width but also height. That's why the pointer went down.
The percentage 'left' property seems to work fine. If you want to use also percents for 'top' property (which could solve the problem), you have to explicitly define the height of the element (the image in your case). You can do that with jQuery for example most easily like this (given that you have an #image element):
$('#image').height($('#image').height());
Then you can add a resize handler and reassign new height. You may have to remove the previous height, so the whole would be something like this:
$(window).resize(function() {
$("#image").css("height","");
$('#image').height($('#image').height());
});
Then you should be able to use css top property in percents and it would be working after window resize.
You will need to modify your layout in order to achieve this behavior
First of all you need to add your map as an img and created a holder for it
<div class="content-right">
<div class="content-inner-top">
<div class="map-holder">
<img src="http://i.imgur.com/wLJ1Pnt.jpg" class="content-inner-map" />
<div id="position"></div>
</div>
</div>
<div class="content-inner-bottom"></div>
</div>
After that it is a matter of css:
added
.content-inner-map {
resize: both;
width: 100%;
}
.map-holder {
position: relative;
top: 50%;
display: block;
transform: translateY(-50%);
}
.content-inner-top:after {
position: absolute;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
top:0;
left:0;
right:0;
bottom:0;
content:"";
}
Altered
.content-inner-top {
width: 100%;
height: 70%;
-moz-user-select: none;
box-sizing: border-box;
position: relative;
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: absolute;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 24%;
}
Here is a working Fiddle
I would use SVG instead, simple code and fully responsive:
svg {
display: block;
width: 100%;
}
circle {
stroke: white;
stroke-width: 3;
fill: red;
}
<svg viewBox="0 0 604 568">
<image x="0" y="0" width="586" height="604" xlink:href="http://i60.tinypic.com/2enrntu.jpg"/>
<circle cx="400" cy="190" r="20"/>
</svg>