Before I begin, yes I know this question has been asked many times but I cannot get it to working anyway. I have a div which is transparent but the contents i.e. text and input fields that I dont wan't to be transparent.
Please don't link to previous answers as I followed them but without success.
Here's what my CSS code looks like:
.csmodal {
height: 300px;
width: 600px;
background-color: rgba(25, 11, 36, .5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
float: none;
display: inline-block;
padding: 30px;
margin: 200px auto;
opacity: 0.4;
}
.cs-container {
margin-right: auto;
margin-left: auto;
}
#cs-headline {
margin-bottom: 20px;
}
#cs-description {
font-size: 14px;
line-height: 20px;
color: #eeee22;
}
h1 {
margin: 10px 0;
text-rendering: optimizelegibility;
color: #eeee22;
}
HTML code:
<div class="cs-container">
<div class="row">
<div class="col-md-6 col-md-offset-3 csmodal">
<h1 id="cs-headline">Website Launching Soon</h1>
<div id="cs-description">
<p style="text-align: center;">The launch of our official website is coming soon. Stay tuned!</p>
</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
</div>
</div> </div>
Specifying element opacity changes the opacity for the parent and all children.
Thinking in terms of functionality all we want is to be able to see the background. in that case we can apply a background color or an alpha channel like so: background-color:rgba({0 -255},{0 -255},{0 -255},[0 - 1] the last part determines opacity.
In case you want to have an image with an alpha channel you need to have a transparent asset. like so.
Use your imagination if you can position an element in absolute position and apply opacity to that and so on
Related
I'm building a website where it will have colors alternating between white and black but I can't put background color on the components separately, only on the global CSS. how to solve this?
This should be possible in various ways. One is to target the host element in each component's styling file:
:host {
background-color: black;
}
To make this dynamic, you could do something clever with a binding or through a global stylesheet, like you've mentioned.
There are different ways you can do this but I think this is the most simple one.
You can just make two divs
HTML:
<div class="black">
</div>
And
<div class="white">
</div>
Then you edit both classes in CSS
You can just do something like this:
.black {
background-color: black;
}
.white {
background-color: white;
}
It is always better to Use Css file instead of inline coding because it is easy to
spot and change the daata
HTMl
<div>
<div class="col-md-12 col-sm-12 lbl_div ">
<label class="title textclr">
E-MAIL
</label>
</div>
<div class="col-md-12 col-sm-12 ">
<input type="email" id= "email" name="email" class="txtdiv form- control" [(ngModel)]="email" required email>
</div>
</div>
CSS
.txtdiv {
margin-top: 1em;
margin-left: 7em;
width: 60%;
height: 2em;
border-radius: 1em;
border-color: fuchsia;
box-shadow: 1px 2px 12px 0px #fff;
background-color: black
}
This question already has answers here:
How to blur background image of div, without blurring the remaining site or the content of the div
(2 answers)
Closed 1 year ago.
I have a form and some text inside a div that drops down from the top when you hover around it, what I want to do is make it so that when it drops, it makes everything behind it blurry and a bit darker, I've managed to do the darker part with
background-color: rgba(0,0,0,0.05)
but now I don't know how to make it blurry without making the form and text blurry as well.
(I want to make the nameInsert id div have the blurry background)
This is my html:
<div id="nameInsert" class="nameInsert">
<div id="nameList" class="nameList">
<div id="boyNameList" class="boyNameList"></div>
<div id="girlNameList" class="girlNameList"></div>
</div>
<div id="addNames" style="display: table-row;">
<!-- DIVS WITH STYLES USED TO PLACE THEM SIDE BY SIDE -->
<div class="boyForm">
<form onsubmit="addBoyName(); return false">
<label for="boyName"></label>
<input type="text" name="boyName" id="boyName" placeholder="add guy" required>
</form>
</div>
and this is my css:
.nameInsert{
background-color: black;
background-color: rgba(0, 0, 0, 0.05);
}
.nameList{
margin-left: 3vw;
margin-right: 3vw;
}
.boyNameList{
width: 100%;
display: table-cell;
font-family: 'mesloBold';
}
thanks :)
your HTML had not div close now I've done you can use blow my code I hope you wanted this style
.nameInsert {
width: 100px;
height: 100px;
background-color: black;
filter: blur(5px);
opacity: 0.5;
}
.nameList {
margin-left: 3vw;
margin-right: 3vw;
}
.boyNameList {
width: 100%;
display: table-cell;
font-family: 'mesloBold';
}
<div id="nameInsert" class="nameInsert">
<div id="nameList" class="nameList">
<div id="boyNameList" class="boyNameList"></div>
<div id="girlNameList" class="girlNameList"></div>
</div>
</div>
<div id="addNames" style="display: table-row;">
<!-- DIVS WITH STYLES USED TO PLACE THEM SIDE BY SIDE -->
<div class="boyForm">
<form onsubmit="addBoyName(); return false">
<label for="boyName"></label>
<input type="text" name="boyName" id="boyName" placeholder="add guy" required>
</form>
</div>
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
I need a CSS filter to apply to all elements in a container, except for specific ones. Quick example to explain the situation:
<div class="container">
<img class="one" src="blah" />
<img class="two" src="blah" />
<img class="three" src="blah" />
</div>
Then I am applying filters as so:
.container {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
So the container has the greyscale filter applied to it, and all img in it are turned to grey. However, I want one of the img to not turn to grey:
.two {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
However, this is not working. The filter of the container seems to be overriding the filter of the contained element.
Any ideas how I can get around this? Is there an easy way, or do I have to write up some jQuery to look at all the elements that aren't ".two" and apply the filter to them, rather than the container?
Update: I neglected to mention an important caveat: The container has to be greyscale, due to it having a background-image property that is to also be turned grey. This little snippet is part of more containers that are all going greyscale as well, I'm really just trying to figure out if there's a way to have an overriding exemption to the rule on the parent, since the parent has to have the rule as well.
According to CSS specifity rules -
Either put the .two after the .container in the css,
Or make the .two more specific, i.e. img.two
UPDATE
The .container rule is on the div itself - not on the images. So the container goes grayscale regardless of what you tell the images to do. Try changing that into .container img, and then try incorporating the answers you received.
use > to specify an image that is a child of .container the use not: to specify that you don't want the second image grey
.container > img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
<div class="container">
<img class="one" src="http://lorempixel.com/400/200" />
<img class="two" src="http://lorempixel.com/400/200" />
<img class="three" src="http://lorempixel.com/400/200" />
</div>
jsfiddle
.container > img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Use :not to exclude .two
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.
.container img:not(.two) {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Seven years after this question was asked, I thought I'd come up with a brilliant CSS-native solution to this, using:
calc()
CSS Custom Properties
Hours of experimenting with CSS filter have satisfied me that the solution will never work.
Why not? Because functions like filter: hue-rotate() are both more complicated than you might expect and also, unhelpfully, unreliable.
My first ("clever") solution
(Calculate reverse transformations - cute, but doesn't work)
The starting point of my "clever" solution was:
It's well-established that once you apply filter to a parent element, that filter (much like opacity) continues to apply to all descendant elements and there is no way to mask a descendant element from that filter.
But filter simply describes transformations, right? And - surely - anything transformed can be un-transformed via a transformation which represents a mirror-image of the original?
Furthermore, if the original transformation is built in the right way from CSS Custom Properties, then it ought to be possible to build the mirror-image transformation using the same CSS Custom Properties and calc().
So I came up with something like this:
/*
OTHER CSS CUSTOM PROPERTIES (NOT NECESSARY FOR THIS EXAMPLE)
.square[data-theme="green"] {
--saturation: 1;
--contrast: 0.775;
--brightness: 1.2;
}
.square[data-theme="blue"] {
--saturation: 1;
--contrast: 0.775;
--brightness: 1.2;
}
.filter {
--lightness: contrast(var(--contrast)) brightness(var(--brightness));
--hsl-filter: hue-rotate(var(--hue)) saturate(var(--saturation)) var(--lightness);
}
.no-filter {
--reverse-lightness: contrast(calc(1 / var(--contrast))) brightness(calc(1 / var(--brightness)));
--reverse-hsl-filter: hue-rotate(calc(0deg - var(--hue))) saturate(calc(1 / var(--saturation))) var(--reverse-lightness);
}
*/
h2 {
position: absolute;
top: 0;
left: 0;
z-index: 6;
margin: 2px 0 0 2px;
padding: 0;
color: rgb(255, 255, 255);
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
}
.square {
position: relative;
float: left;
display: inline-block;
width: 92px;
height: 92px;
margin: 2px;
padding: 6px;
background-color: rgb(191, 0, 0);
box-sizing: border-box;
}
.square:nth-of-type(4) {
clear: left;
}
.circle {
width: 80px;
height: 80px;
padding: 30px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
box-sizing: border-box;
}
.inner-square {
width: 20px;
height: 20px;
background-color: rgb(255, 127, 0);
}
.square[data-theme="green"] {
--hue: 112.5deg;
}
.square[data-theme="blue"] {
--hue: 212.5deg;
}
.filter {
--hsl-filter: hue-rotate(var(--hue));
filter: var(--hsl-filter);
}
.no-filter {
--reverse-hsl-filter: hue-rotate(calc(0deg - var(--hue)));
filter: var(--reverse-hsl-filter);
}
<div class="square">
<h2>Original</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="green">
<h2>Filtered</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="green">
<h2>No-Filter Test</h2>
<div class="circle no-filter">
<div class="inner-square"></div>
</div>
</div>
<div class="square">
<h2>Original</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="blue">
<h2>Filtered</h2>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="square filter" data-theme="blue">
<h2>No-Filter Test</h2>
<div class="circle no-filter">
<div class="inner-square"></div>
</div>
</div>
It's less obvious in the top row (at first glance), but in the second row, the last square (ie. bottom right) clearly shows how this reverse-transformation approach is neither robust nor reliable:
The orange square in the bottom-right square isn't perfect, but it's close enough to the original
The orange square in the top-right square is less perfect, but it's still passable (just about)
The red circle in the top-right square isn't perfect, but it's close enough to the original
The red circle in the bottom-right square is no good at all
My second (less clever) solution
(Make the non-filtered element a sibling instead of a descendant element - less clever but it does work)
We may conclude from the above that the matrix transformation initiated by filter: hue-rotate() cannot be easily reversed - and that even if a computational way to reverse it consistently via JavaScript can be found - I'm currently doubtful over whether even that is possible - it's almost certainly not going to be possible via CSS calc().
Alternatively, we can turn the descendant elements we don't want to be affected by the filter into siblings of the element which has the CSS filter applied to it, instead:
h2 {
position: absolute;
top: 0;
left: 0;
z-index: 6;
margin: 2px 0 0 2px;
padding: 0;
color: rgb(255, 255, 255);
font-size: 12px;
font-family: sans-serif;
font-weight: 700;
}
.container {
position: relative;
float: left;
display: inline-block;
width: 92px;
height: 92px;
margin: 2px;
background-color: rgb(0, 0, 0);
box-sizing: border-box;
}
.container:nth-of-type(4) {
clear: left;
}
.square {
width: 92px;
height: 92px;
background-color: rgb(191, 0, 0);
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
margin: 6px;
padding: 30px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
box-sizing: border-box;
}
.inner-square {
width: 20px;
height: 20px;
background-color: rgb(255, 127, 0);
}
.container[data-theme="green"] {
--hue: 112.5deg;
}
.container[data-theme="blue"] {
--hue: 212.5deg;
}
.filter {
--hsl-filter: hue-rotate(var(--hue));
filter: var(--hsl-filter);
}
<div class="container">
<h2>Original</h2>
<div class="square"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="green">
<h2>Filtered</h2>
<div class="square filter"></div>
<div class="circle filter">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="green">
<h2>No-Filter Test</h2>
<div class="square filter"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container">
<h2>Original</h2>
<div class="square"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="blue">
<h2>Filtered</h2>
<div class="square filter"></div>
<div class="circle filter">
<div class="inner-square"></div>
</div>
</div>
<div class="container" data-theme="blue">
<h2>No-Filter Test</h2>
<div class="square filter"></div>
<div class="circle">
<div class="inner-square"></div>
</div>
</div>
This second solution works perfectly, but it requires the HTML to be restructured and the CSS adjusted to compensate:
the filtered element from the original setup needs to be placed within a container element
the non-filtered descendant of the filtered element now needs to become a sibling of the filtered element, within the same container
finally, the non-filtered sibling needs to be re-positioned within the container so that it displays in the same place as before, back when it was a descendant
After taking some time to re-arrange markup and re-adjust styles, we can achieve the originally intended effect with some elements filtered and other elements non-filtered.
This second approach feels much less elegant than calculating mirror-image colour-transformations via CSS Custom Properties and calc() but until some kind of filter mask like:
filter-apply: all | none // or even (2 - n), (n + 3) etc.
is introduced into CSS...
... the only way for a child-element to be masked from a filter is to turn the child-element into a sibling-element.
Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}