I am learning design patterns using gradients in CSS3. But stuck up with something which I cannot able to understand how it works.
Actually, I am trying to understand patterns through the blog post of Lea Verou: Link.
Now, there's one pattern i.e., checkbox pattern CheckBox Pattern Demo.
There is a background-position: 0 0, 50px 50px; set in its CSS.
As far as I know we can set top right bottom left inside background position but they are set without comma separation.
So, Can anyone explain me how this exactly background-position works what else we can do with background position as this is something new. I only use to set image from CSS Sprites as of earlier but this is something new.
Thanks in advance !!!
background-position: 0 0, 50px 50px; is setting the value of the position for 2 different backgrounds. If you look at the sample, you will see that background-image actually has 2 sets of the same background.
Related
Hi please check the photo below, what im doing is i want to have a background image below the slider with the fix size
Css Code
.swiper-slider-bg {
background: url('http://localhost/wordpress/wp-content/uploads/2017/11/bg-08-1.png');
background-size: auto 100%;
}
Current code
What I need to have
Define it in pixels instead of percentage. Or, as a much flexible alternate, you may also use pseudo to achieve the same.
:before or :after selector shall be useful for you. I am hoping that you know how to use these selectors so not explaining that stuff.
I think this is you need to want, refer below links for your use, It will be use your full page image slider.
https://www.w3schools.com/w3css/tryit.asp? filename=tryw3css_slideshow_self
https://codepen.io/jibbon/pen/BoisC
how to make a circular highlight over any object on a site....
I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.
The only other post I've seen about this is this one...
(jquery) Blackout the entire screen and highlight a section of the page?
although they didnt address the circular issue there
I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..
Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?
anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...
You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css
What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.
Example code
#torch{
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: fixed;
box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}
Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.
Demo at JSFiddle
By using border-radius to make the circle and for the other stuff may be this can help you..http://jquerytools.org/demos/toolbox/expose/
Just use border-radius to make the container you want to "expose" a circle.
Using the jsfiddle example from your linked post, i've trimmed it down to be easier to follow, but essentially, you just need to use the post you linked to along with a big border radius value to mimic a circle.
http://jsfiddle.net/98EAt/
2 years since the question was asked,
I've developed a plugin for this matter,
Let me know your feedback.
I want to use box-shadow everywhere except from the top on this example:
http://jsfiddle.net/KquxS/2/
I'm pretty sure it can be done with z-values but I'm not sure how, as you can see I've had a little play trying but no luck.
I wouldn't recommend using z-index.
Consider using the following style:
ul:not(:first-child) {
box-shadow:0 0 40px black;
}
I'm gonna leave this but I think the comment you just posted helped clarify what you're looking for.
If you use position: absolute, you have to provide the position (top, left, etc) as well. Otherwise position and z-index have no effect and the elements will be drawn in the order they appear in the DOM.
See http://www.w3.org/wiki/CSS/Properties/z-index
My HTML document contains #victimDiv thats background image property is set to:
-webkit-linear-gradient(-75deg, black 10px, #4AC0F2);
After I load #victimDiv with ajax call and its height prolongs, gradient gets longer as its length is defined in percentage instead being fixed in pixels.
maybe it's because you apply css length parameters on an element when the element is not already in the DOM. this is not possible... try to do it with the css embedded in the respective html tag.
I misunderstood syntax meaning:
pixels or percentage after color means that color starts from there not ends. Kind of a weird name color stop???
Anyway right syntax for what I wanted to achieve is:
-webkit-linear-gradient(-75deg, black, #4AC0F2 10px);
Good night, and good luck! :)
I want the header to look alike coreLogic. But there is some alignment issues with mine. Here is the link http://dragonfly.zymichost.com/internetbrands.html. How to solve this issue??
Change your i-brands.css file:
#header .utility
{
background: url("../images/utility-nav.png") no-repeat scroll 0 0 transparent
}
Taking out the -200px put the image up and took out the line. I tested it.
Also, get firebug if possible. You could have figured this out for yourself in two seconds. Keep on truckin sir.
It's not an alignment issue. CoreLogic is using a CSS sprite to display the background image. That's why they have used -200px and other as position values.
Note: I wanted this to be a comment but I don't see an option to add comment to OP's post.