I am trying to add tick in my application .currently my background is black.could you please tell me how to add outline tick
heer is code
https://jsbin.com/cilocakedu/edit?html,css,output
.img {
width: 200px;
opacity: 0.5
}
.image-container {
position: relative;
text-align: center;
}
.icon {
position: absolute;
top: 50%;
left: 50%;
font-size: 5rem;
transform: translate(-50%, -50%);
}
It sounds like you are looking for a checkbox that is transparent, but with a black outline. You can try adding this to your .icon class:
color: transparent;
-webkit-text-stroke: 2px black;
Note that '-webkit-text-stroke' works on most modern browsers:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke#Browser_compatibility
Related
I want it to turn out like this, but unfortunately my triangle goes into the background of the next stage. I spent 3 hours on it. Help please
https://stackblitz.com/edit/angular-3llbmq?file=src/components/sales-funnel/sales-funnel.component.html
Here it is done with polygon, adapt colors yourself
div.container {
display: inline-flex;
align-items: center;
position: relative;
background: black;
width: 100%;
}
div.tangle {
height: 50px;
width: 200px;
clip-path: polygon(0% 20%,
60% 20%,
95% 20%,
100% 50%,
95% 80%,
60% 80%,
0% 80%);
}
div.tangle:nth-child(1) {
background:lightgreen;
transform: translateX(20px);
z-index:3;
}
div.tangle:nth-child(2) {
background:green;
transform: translateX(10px);
}
div.normal {
height: 30px;
width: 200px;
background: white;
}
<div class="container">
<div class="tangle"></div>
<div class="tangle"></div>
<div class="normal"></div>
</div>
This can easily be achieved with the use of ::before and ::after pseudo-elements - with one providing the background of the 'next step' and one providing the triangle with the 'current step' bg color.
Not sure if you neeed a elements in the lis - so I just did straight li's but it would not be hard to change the styling for the use of a elements.
Its best not to try to to use opacity for the step differences - its more accessible to use hex codes directly rather than the one hex code with different opacity values.
Note that the solution of preventing the bleeding color is to space the li's apart with margin and to use the before / after pseudo-elements to fill the gaps - its better to do this than overlap the element over he next step to prevent issues with clicking on areas that are covered by the triangles
ul {
display: flex;
list-style: none;
padding: 0;
border: solid 1px #d4d4d4;
background: lemonChiffon
}
li {
font-size: 16px;
line-height: 20px;
margin-right: 16px;
padding: 4px 32px 4px 8px;
position: relative;
}
.visited {
background: #AFD954;
color: #fff;
}
.visited::before {
content: '';
width: 16px;
height: 28px;
z-index: 5;
position: absolute;
top: 0;
right:-16px;
background: #9BCE29
}
.visited::after {
content: '';
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #AFD954;
position: absolute;
right:-14px;
z-index: 9;
top: 0
}
.active {
background: #9BCE29;
color: #fff
}
.active::before {
content: '';
width: 16px;
height: 28px;
z-index: 5;
position: absolute;
top: 0;
right:-16px;
background: lemonChiffon
}
.active::after {
content: '';
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #9BCE29 ;
position: absolute;
right:-14px;
z-index: 9;
top: 0
}
.not-visited {
background: lemonChiffon
}
<ul>
<li class="visited">New Deal</li>
<li class="active">Contact</li>
<li class="not-visited">Qualified</li>
</ul>
I had edited your stackbliz example. Please note the HTML and CSS changes.
Don't use opacity to lighten the color. Instead, use SCSS lighten and darken methods.
Please utilize the most of the CSS than the HTML part for the assigning styles. Utilize the classes you have.
NOTE: Please take the benefit of SCSS variables, nesting and pre-defined methods.
Added the reverse z-index to stack the previous element to place over next element.
Below 6 is the total elements
[ngStyle]="{
zIndex: 6 - i
}"
https://stackblitz.com/edit/angular-jhk6qf?file=src/components/sales-funnel/sales-funnel.component.scss
Checkboxes doesn't appear properly when using Chrome and zoom out to 75% or less. I'm also using AngularJS latest version. In FireFox and Internet Explorer they appear properly.
I tried to fix this problem with:
input[type=checkbox] {
-webkit-appearance:checkbox;
}
but this doesn't help.
Here how it looks like:
The checkboxes are custom and there is 1 span and inside 2 divs. Here is the code:
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}`
.ckeckmark > .stem {
position: absolute;
width: 1px;
height: 11px;
background-color: #1C4A9E;
left: 8px;
top: 2px;
}
.ckeckmark > .kick {
position: absolute;
width: 5px;
height: 1px;
background-color: #1C4A9E;
left: 3px;
top: 12px;
}
<span ng-class="{ckeckmark: resident}">
<div class="stem"></div>
<div class="kick"></div>
</span>
.stem and .kick are 2 divs next to each other inside .checkmark span class.
After research i noticed that Google Chrome displays a web page OK at 100% zoom (and above) but when the zoom level is less than 100% (e.g. 90%) padding get changed. A moves from the right-hand-side of the screen to the left hand side.
Any help/suggestions?
So I popped this into a fiddle and I think I saw your problem. It took zooming out to 33% before the checkmark disappeared at jsfiddle as opposed to your 75%.
The solution I used was to use borders on the actual stem and kick instead of using a background on those elements.
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid black;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.stem {
position: absolute;
width: 1px;
height: 11px;
border-left: 1px solid red;
left: 8px;
top: 2px;
}
.kick {
position: absolute;
width: 5px;
height: 7px;
border-top: 1px solid red;
left: 3px;
top: 12px;
}
I have not tested this in other browsers, but I zoomed out all the way to 25% and I still saw the checkmark.
Fiddle here: http://jsfiddle.net/Lvc0u55v/1658/
This question already has answers here:
Hover and click on CSS triangle
(4 answers)
Closed 7 years ago.
I am in quite the quandary! I would like to add cursor: pointer to my CSS, but the problem is it is a triangle. If I used the following:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
The whole triangle and everything around it has the "Cursor" affect, how can I make only the triangle have the hover affect?
This can be done with pure CSS if we construct the triangle using transforms and overflow:hidden
FIDDLE
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
NB: The code: translateX(29%) is used to place the rotated blue square back into the center of the container after it is rotated. This value seems to be constant even if we change the dimensions of the container (FIDDLE)
Use SVG or CSS3 to draw the arrow. Give that element cursor: pointer give the div wrapper non-cursor
Relevant article to implement this: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
You could mask the non-triangle areas with pseudo elements, with cursor: default set on them. You'd need to add overflow: hidden to the wrapping element to contain the masks, and of course it relies on the background being a flat colour and the shape you want to mask being a perfect triangle. Not massively extensible and a bit hacky, but it gets the specific result you're after.
#triangleholder {
// ..
overflow: hidden;
}
#triangle {
// ..
position: relative;
}
#triangle:before, #triangle:after {
content: "";
display: block;
position: absolute;
background: white;
width: 100px;
height: 50px;
top: -10px;
cursor: default;
}
#triangle:before {
transform: rotate(-45deg);
right: 0;
}
#triangle:after {
transform: rotate(45deg);
left: 0;
}
I having a small problem in getting the right character for my CSS content element. What I wanted is dots under my heading, 3 dots to be specific and so I have the following CSS:
.dotted-effect::before{
position: absolute;
top: 80%;
left: 50%;
content: '.';
font-size: 1.2em;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
color: #444;
text-shadow: 20px 0 #444, -20px 0 #444;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
The problem is in the way the CSS dot is displayed. Have a look at how it looks:
Notice how the dots look a bit squarish and tiny.
Now I'd like my dots to be circular and a bit bold: not ugly bold, but slightly bold.
I tried looking up Stack Overflow and a lot of people had the same problem:
This thread addresses my problem in a few ways. The problem is I am a bit specific about how I want my dots to be, and so I cannot settle for those tiny small dots. I also went through a lot of HTML ASCHII charts and none of them had what I was looking for.
What can I do next to achieve my goal?
How about background + border-radius?
http://jsfiddle.net/z7v6xk44/1/
<div class="dots"></div>
.dots, .dots:before, .dots:after {
width: 4px;
height: 4px;
background: black;
border-radius: 50%;
}
.dots{
margin: 0 auto;
position: relative;
display: inline-block;
}
.dots:before {
content: '';
position: absolute;
left: -10px;
}
.dots:after {
content: '';
position: absolute;
right: -10px;
}
In the following code, I want a tool-tip to come up when the user hovers the span, how do I do that? I don't want to use any links.
<span> text </span>
Here's the simple, built-in way:
<span title="My tip">text</span>
That gives you plain text tooltips. If you want rich tooltips, with formatted HTML in them, you'll need to use a library to do that. Fortunately there are loads of those.
Custom Tooltips with pure CSS - no JavaScript needed:
Example here (with code) / Full screen example
As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.
Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.
You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).
For instance, the following will add a tooltop positioned at the bottom of the span element.
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
How does this work?
You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.
[data-tooltip]:before {
content: attr(data-tooltip);
}
In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.
Example here (with code) / Full screen example
Full CSS used in the example - customize this to your needs.
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 4px 8px;
font-size: 14px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}
In most browsers, the title attribute will render as a tooltip, and is generally flexible as to what sorts of elements it'll work with.
<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
stackoverflow.com
<img src="something.png" alt="Something" title="Something">
All of those will render tooltips in most every browser.
For the basic tooltip, you want:
<span title="This is my tooltip"> Hover on me to see tooltip! </span>
The title attribute will be used as the text for tooltip by the browser. If you want to apply style to it, consider using some libraries, e.g. jQuery UI.