Hi all !
I want to create a small round static percent indicator in CSS but I can't find the solution.
The squared indicator at left is ok, but so ugly, I want it round !
I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask : http://webkit.org/blog/181/css-masks/), but it seems like it's only for img...
The solution can works only on webkit browsers, because it's for a mobile webapp.
Here is my code to create the (ugly) indicator in the image above :
<div class="meter-wrap">
<div class="meter-value" style="background-color: #489d41; width: 70%;">
<div class="meter-text"> 70 % </div>
</div>
</div>
And the css :
.meter-wrap{
position: relative;
}
.meter-value {
background-color: #489d41;
}
.meter-wrap, .meter-value, .meter-text {
width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
background: #bdbdbd top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 2px;
color: #000;
text-align: center;
width: 100%;
font-size: 40%;
text-shadow: #fffeff 1px 1px 0;
}
Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.
You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:
<div class="meter-wrap">
<div class="meter-text"> 70 % </div>
<div class="meter-value-wrapper" style="width:70%;">
<div class="meter-value" style="background-color: #489d41;">
</div>
</div>
And the class for .meter-value-wrapper might look like:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}
Related
i have implemented a button which should change the background color, into blue from black.
But i didnt find a easy way, how I can do that.
This is my HTML file
<div style="background-color: #161624; width: 100%; height: 20%; "></div <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>
<button id="changecolor">Change Color</button>
</div>
I want that the button changecolor, change the background color, where the height is 20% at both.
enter image description here
The blueblack color should change
I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.
simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<body>
currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to
Just let me know if you have any questions
It's mostly in the title. I am displaying products in divs on my website. On hover, I make them increase in size by applying a margin of -15px to give them a nice hover effect. When I hover over any of them, it is fine except for the right-most ones, as it pushes the products below it away into the Bootstrap row below. Here are images:
Good (hover over a middle one):
Bad (hover over the right-most one):
Here is the code:
Search results page:
<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>
Product template:
<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>
CSS:
div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}
How do I stop the Bootstrap grid system from pushing the bottom row into the row lower?
on hover, I make them increase in size by applying a margin of -15px
Use transform: scale(x); instead of margin: -15px; as transforms do not affect the box-model of the element.
CSS Transforms Module Level 1:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
If you want to move it up by a certain amount, use transform: translateY(-15px) instead of changing the margin on the div.product-item:hover class. To move it in a context that does not interrupt the rest of the document. Or you can use transform: scale(1.2) to make things bigger.
The problem is that it's actually changing the dimentions of the div when you change the margin which in turn affects others. Check out this link . It gives an example on how to give such zoom effect.
Creating a Zoom Effect on an image on hover using CSS?
Here is fiddle example: example
Question1: I have a flowing arrow triangle css:
.wrapper {
background-color: black;
width: 100px;
height: 100px;
}
.downArror {
float: left;
display: inline-block;
border: 15px solid rgba(0, 0, 0, 0);
border-bottom-color: #fff;
margin: 8px;
}
HTML:
<div class="wrapper"><div class="downArror"></div></div>
Just wondering, is there a way to change the css that make this triangle to a '^' shape?
what I'd like to have is something like this:
Question2:
Is there a way to make a tick like this using code?:
I am currently using √ but, the shape is slightly different
I actually created this effect awhile back for a menu. You can find it here:
http://codepen.io/spikeyty/pen/IFBro
Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!
It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.