Develop Reference

How to build a CSS dial guage dynamically?

How can I add the grey dial underneath like in the picture below?
I have created a dial that shows 100%. I was wondering if I can write a function to dynamically render the %(may be by using a math.random function)?
.ring {
position: relative;
width: 50vmin;
height: 50vmin;
background-image: radial-gradient(#C816CDFF 0, #C816CDFF 50%, transparent 50%, transparent 100%),
radial-gradient(#C816CDFF 0, #C816CDFF 50%, transparent 50%, transparent 100%),
radial-gradient(white 0, white 66%, transparent 66%),
conic-gradient(#C816CDFF 0, #c816cd 150deg, white 60deg, white 200deg, #C816CDFF 210deg, #C816CDFF 360deg);
background-size: 5.0% 5.0%, 5.0% 5.0%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: 27.2% 95.6%, 75.5% 94.2%, center center, center center;
border-radius: 50%;
border-style: none;
}
.speed {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: gray;
}
.speed .number {
font-size: 10px;
font-weight: bold;
color: black;
}
.speed .units {
font-size: 25px;
color: black;
}
<div className="App">
<div class="ring">
<div class="speed">
<div class="number">Lorem ipsum dolor</div>
<div class="units" >100%</div>
</div>
</div>
</div>

Creating scroll gradient when div can be scrolled up or down?

I am trying to create a scroll gradient at the bottom and top of my div so it is easier to see that the text is scrollable.
Right now you can see the gradient is at the top, but if I go to question_text:before and set bottom: 0; the gradient goes to the bottom of the screen instead of the bottom of the div.
The width also extends past the boundaries of the parent div (question).
What do I need to do to get an effect like this?
Scroll gradient
https://codepen.io/SquanchyHappy/pen/mdmwRyy
The above link shows my full code, but the divs I'm trying to manipulate are below:
<div id="question" class="question resize">
<div id="question_text" class="question-text">
<span>Replace this with enough text to make scrollable.</span>
</div>
</div>
.question {
grid-rows: 1/2;
position: relative;
font-size: 3vh;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.question-text {
height: 100%;
overflow: auto;
word-break: break-word;
position: relative;
}
.question-text:before {
content: "";
width: 100%;
height: 15%;
position: fixed;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

How to Make Pop-Up Title Card on Hover?

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>

transparent UI box in CSS

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;
}

Custom-shaped <div> tags with background images

I'm trying to implement a popover design. Each popover has a header with a dynamically generated background image on it. The design calls for a pointer at the top of the header, but I cannot think of a way to implement this and maintain the background image.
Here's the current markup, sans pointer:
<div class="popup">
<header class="popup-header" style="background-image: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg);">
<h1>
<a class="resourceName" href="" target="_blank"></a>
</h1>
<div class="overlay"></div>
</header>
<main class="popup-body">
<section class="details">
<div class="resourceDescription">
<p></p>
</div><!-- /resource-description-->
<div class="attributes">
</div><!-- attronites-->
</section><!-- / details-->
<section class="organization">
<h3>Organization Information</h3>
<h2 class="orgName">
</h2>
<div class="orgDescription">
</div><!-- /orgdescription-->
</section><!-- /organization-->
</main>
<section class="cta">
<a class="btn" href="" target="_blank">Participate</a>
</section><!-- cta-->
</div><!--popup-->
Every CSS shape implementation I know requires borders or box shadows, neither of which will apply here. Any idea on how to implement this?

This can be achieved using css clip-path and using a polygon as the parameter. Here is an example:
<div class="dialog"></div>
And the CSS
.dialog{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
width: 500px;
height: 200px;
background-color: #d3d0c9;
background-image: url(http://lorempixel.com/400/200/sports/1/Dummy-Text/);
background-size: cover;
background-position: center center;
-webkit-clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%);
}
<div class="dialog"></div>
Browser support is limited to modern browsers though.
You can play around using this tool : http://bennettfeely.com/clippy/

Here's a solution that uses transforms to accomplish the desired corner effect. Although the solution is more complicated than the accepted one, it can be implemented on pretty much all modern browsers. By using several of the transform polyfills, the solution can be implemented across the board.
The algorithm behind this solution achieves a corner element via skewX() transform that is equally applied on the image (set as a background) and its container, just in different directions (e.g., -63.43deg and 63.43deg, depending on the dimensions of the corner element). Then the generated corner element is perfectly aligned with the heading's background.
Here's a fiddle: http://jsfiddle.net/bLbt11a3/.
HTML:
<div class = "popup">
<header>
<h1>DIY Gardener</h1>
<div class = "corner-holder">
<div class = "corner"></div>
</div>
</header>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 10px;
background-color: #eee;
}
.popup {
box-shadow: 0 0 10px #ccc;
height: 240px;
width: 186px;
position: fixed;
top: 50px;
background-color: #fff;
}
.popup h1 {
font: bold 20px/3 Sans-Serif;
color: #fff;
padding: 0 20px;
background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg)
no-repeat
-80px -90px/600px;
}
.popup header {
position: relative;
}
.corner-holder {
position: absolute;
right: 0;
top: 0;
height: 30px;
width: 60px;
overflow: hidden;
transform: translateY(-100%);
}
.corner-holder .corner,
.corner-holder .corner:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: bottom left;
/* webkit trick to get rid of jagged edges */
-webkit-backface-visibility: hidden;
}
.corner-holder .corner {
overflow: hidden;
transform: skewX(-63.43deg);
}
.corner-holder .corner:before {
content: "";
background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg)
no-repeat
-206px -60px/600px;
transform: skewX(63.43deg);
}