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.
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
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.
The site I'm modifying is: www.fashiontogo.ca
Please view the source code via Google Chrome's ability to view source as I can't provide the HTML or the CSS directly here. It isn't my site, and I didn't develop it from scratch. Look at the profile picture in the top right, or any of the images on the page. You'll see a 1px left border (there is a margin associated with the profile picture, but not the others). That needs to be removed.
The CSS file I've been provided for the site does not contain anything causing this. I've tried removing all instances in the CSS that are either "border" or "border-left" and nothing has changed. The only possible thing that I've been able to do is to remove the surrounding div element for the images (named .img_container). A hack fix (that I'd rather avoid) would be to use jQuery to dynamically remove all the img_container divs at load time, but I'd much rather find some CSS fix to this.
Any suggestions or ideas? Any help would be appreciated.
There is a rule
.img_container::after {
...
background-color: rgba(0, 0, 0, 0.2);
}
You have to remove that BG color
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
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris