I want to make a custom cursor, I have a css class which is exactly what i want to put on my cursor, but I cannot find a way to actually put that class onto my cursor, I am not sure if this is a possibility at all, anyone know how I can do this?
this is my css class.
.myicon{
width: 0;
height: 0;
border-top: 4px solid transparent;
border-left: 8px solid red;
border-bottom: 4px solid transparent;
right:100%;
top:-5%;
position: absolute;
clear: both;
content:'';
}
is there anyway I can change my cursor to have this class?
you can pass url of png image
.module {
cursor: url('path-to-image.png'), auto;
}
Related
Am using Angular 6 App. I want to change the style of ng-multiselect-dropdown. If i override the style using inline,external and internal, it does not affect anything. Only if i change the style in node modules the change effects in UI. But it is not the correct way.How should i achieve this?
style.css
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 10px;
width: 0;
height: 0;
border-top: 5px solid #adadad;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
you can use !important to you custom ccs inside style.css file
like:
display: inline-block !important;
second solution you can make component ViewEncapsulation.None
I thing this may work..
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
I want to ask how can i create a css arrow triangle with smooth sides i.e. no cut in the side of arrow without using any image? I have already tried the tutorial -
[http://css-tricks.com/snippets/css/css-triangle/][1]
.arrow_up
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
position:absolute;
top:75px;
left:250px;
}
<div class="arrow_up"></div>
UPDATE
Sorry, the issue was found only in some older version of Firefox.
You need to use a pseudo element and rotate it:
DEMO
CSS:
.arrow_up
{
width: 100px;
height: 50px;
position:absolute;
top:150px;
left:250px;
overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
content:'';
position:absolute;
width:100%;
padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
transform:rotate(45deg);/* we'll see a corner */
background:black;
top:20px;/* tune this according to size of parent or size to be seen */
}
Do not forget to add vendor-prefix or use a script that adds them automaticly.
The use o a pseudo element allows to add content in the box : ie. http://codepen.io/gc-nomade/pen/gdoGA
The only thing I can possibly think of is that you have another element on the page which is slightly overlapping onto the arrow as when tested it works fine:
http://jsfiddle.net/Hive7/qLAg4/
.arrow_up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
position: absolute;
top: 75px;
left: 250px;
}
It could be something to do with your browser as well though
I have a fixed header on my site that I'm working on. So the content of my page flows under the header and the header stays fixed at the top of the page. I can't use the border-radius function in css to create my rounded corners that I want because the page content background color shows on the outside of my rounded corners. So I have implemented two rounded corner images, one for the left and one for the right. My problem is, the images move a total of 1px when I zoom. No matter how much I zoom, it only moves a total of 1px and for the life of me, I can't seem to figure out the problem. I'm going to post a link to my site and maybe somebody can go through the html and css and try to figure this out. I also put a link to download my VB project to look at in Visual Studio. Any help would be appreciated thanks a lot.
Link to Webpage
http://aspspider.info/speeddemon8406/Default.aspx
Link to download VB project
http://www1.datafilehost.com/d/46288e83
#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.
This is more of a curiosity question than something I really need to know.
On this page:
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.
Bootstrap is very cool. I just got it going with Symfony.
It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.
How to do it:
.foo:before {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-left-color: #333;
}
http://jsfiddle.net/fGSZx/
Here are some resources to help:
CSS Triangle from CSS-Tricks (this should clear everything up)
Smashing Mag article about :before and :after
Here is the CSS for an upward facing caret, based on the CSS from bootstrap:
.caret-up {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: none;
border-bottom: 4px solid #FFFFFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-width: 0px;
border-top-style: dotted;
content: "";
}