I have a website created in MVC4.
I have an image. And I only want to show the shape (an arrow) of the image. And I don't want to show the rest of the image (the background).
<= only the white background of the arrows has to be disappeared.
How do you do that?
I tried this, but with this the whole image will disappear, in stead of a part of it:
.images_top {
width: 30px;
text-align: center;
vertical-align: top;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
First of all I think you can use a PNG with alpha channel.
If this is not possible look at this tutorial about how to clip images by using the SVG clip-path.
http://www.html5rocks.com/en/tutorials/masking/adobe/
Even though it is possible only in recent browsers.
Use PNG Images for Transparent Background. You can use any online converter to convert your image to PNG.
Apart from the now better supported PNG (and PNG8 with better fallback-support (looking at IE) and a (configurable) transparent color (index from the pallette) instead of alpha, pretty much just like GIF), there is also GIF which has 'always' been supported (and is no longer cumbered with legal issues, which were only due to it's LZW based compression-algorithm, that one can bypass).
Because of the lack of alpha-channel, creating nice transparent PNG8 and GIF images (without the dreaded overly visual grainy (often white) borders) is somewhat of a true art, infact pixel-art.
The trick is to touch-up the borders between color and transparancy by hand AND to set the image's background-color (when rendering from alpha channel to single color-index transparancy) to the average color of the background the images are going to be used against.
The idea of fatter png's is that they have alpha-channels which will give you (for clear example) nice shades (if you had applied such an effect) that will blend with any background. Now with modern browsers, this works pretty nice (and doesn't require the pixel-art). Pixel-art PNG8/GIF can still have it's place though, for base64 encoded ui-elements, usually small icons.
I'm very very bad with CSS (I do not understand syntax at all), I'm just using my knowledge to tinker with code.
I'm using Chrome with Stylish addon, and I want to make dark wikipedia but with my preferences.
I took some code from stylish and just changed colors, but now it's something new where I have
to add stuff so I'm stuck.
It's obviously made in chrome, so it's temporary. This is my problem:
http://imgur.com/a/9IYI3
And my question is how to make that box opaque with like #555 color, without destroying everything else.
Here is code that I'm using: pastebin.com
EDIT: note that opacity will change the opacity of everything in the element it is applied to. Depending on the situation, rgba is the best route.
This can be accomplished a couple of ways:
#mybox
{
background-color:#555;
opacity:0.5;
}
Or
#mybox
{
background-color:rgba(85, 85, 85, 0.5);
}
The opacity property is to change the transparency of an element (0.0 is 0%, while 1.0 is 100%).
The same can be done with rgba (red, green, blue, alpha). Alpha being similar to opacity (same affect really).
As Dwza said in the comments, it would be good for you to take some CSS tutorials. A quick Google search will bring up many. This one looks good: http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906
I want apply gradient to my element. I use less to do it.
For IE9 I use the following css:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FirstColour, endColorstr=#SecondColour)";
where #FirstColour =#b7d4ee and #SecondColour=#7a9eca;
It is the gradient like this:
But in IE9 with css-style defined above, I see the gradient like this:
When page load in IE9 browser, my less isn't compiled (not sure why) and render into:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FirstColour', endColorstr='#SecondColour')
How to get normal gradient display in IE9 with less using?
Use the gradient generator here
It provides all gradient solutions for every browsers, including IE. Instruction is explained there
Try creating gradient from here:
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA
I need its code representation, like #FFFFFF.
As of HTML5, the foreground colors of hyperlinks, among other things, are on track for standardization in the form of guidelines for expected default rendering behavior. In particular, taken from the section Phrasing content, the recommended default colors for unvisited and visited hyperlinks are the following:
:link { color: #0000EE; }
:visited { color: #551A8B; }
Notice that there is no recommended default for active hyperlinks (:link:active, :visited:active), however.
You can use these default colors and reasonably expect them to work. But keep in mind that a browser is free to ignore any or all of these guidelines, as it is never required to follow them. It is, however, recommended for a consistent user experience across browsers (which is how "expected" is defined in this context), so chances are that these colors will correspond to the defaults for most browsers. At worst, they still serve as reasonable approximations of the actual values.
In particular, the default unvisited and visited link colors in the latest versions of Firefox and Chrome are consistent with the above guidelines, but recent versions of IE report different values: unvisited links are rgb(0, 102, 204), or #0066CC, and visited links are rgb(128, 0, 128), or #800080. Older versions of Firefox (and possibly Safari/Chrome) had different defaults as well. Those are older versions, however; the main outlier today that I am aware of is IE. No word yet on whether this will change in Project Spartan — currently it still reflects the same values as the latest version of IE.
If you are looking for a standardized color scheme that is used by all browsers rather than suggested by HTML5, then there isn't one. Neither is there a way to revert to a browser's default value for a particular property on a particular element using pure CSS. You will have to either use the colors suggested by HTML5, or devise your own color scheme and use that instead. Either of these options will take precedence over a browser's defaults, regardless of browser.
If in doubt, you can always use the about:blank technique I described before to sniff out the default colors, as it remains applicable today. You can use this to sniff the active link color in all browsers, for example; in the latest version of Firefox (29 as of this update), it's rgb(238, 0, 0), or #EE0000.
standard link - #0000FF //blue
visited link - #800080 //purple
active link - #FF0000 //red
that was a standard but heavily differs per browser now. (since Nielsen gave it up ;)
The default colours in Gecko, assuming the user hasn't changed their preferences, are:
standard link: #0000EE (blue)
visited link: #551A8B (purple)
active link: #EE0000 (red)
Source
Gecko also provides names for the user's colours; they are -moz-hyperlinktext -moz-visitedhyperlinktext and -moz-activehyperlinktext and they also provide -moz-nativehyperlinktext which is the system link colour.
I am used to Chrome's color
so the blue color in Chrome for link is #007bff
According to the official default HTML stylesheet, there is no defined default link color. However, you can find out the default your browser uses by either taking a screenshot and using the pipette tool in any decent graphic editor or using the developer tools of your browser (select an a element, look for computed values>color).
For me, on Chrome (updated June 2018) the color for an unvisited link is #2779F6. You can always get this by zooming in really close, taking a screenshot, and visiting a website like html-color-codes.info that will convert a screenshot to a color code.
Visited - #660199
Unvisited - #1a0dab
Use the revert css keyword.
a {
color: revert;
}
For uBlock Origin htmlgiant.com##a:style(color:revert !important;)
Entirely depends on the website you are visiting, and in absence of an overwrite on the website, on the browser. There is no standard for that.
The best way to get a browser's default styling on something is to not style the element at all in the first place.
In CSS you can use the color string currentColor inside a link to eg make the border the same color as your default link color:
.example {
border: 1px solid currentColor;
}
Default html color code like this:
Red #FF0000 rgb(255, 0, 0)
Maroon #800000 rgb(128, 0, 0)
Yellow #FFFF00 rgb(255, 255, 0)
Olive #808000 rgb(128, 128, 0)
Blue #0000FF rgb(0, 0, 255)
Navy #000080 rgb(0, 0, 128)
Fuchsia #FF00FF rgb(255, 0, 255)
Purple #800080 rgb(128, 0, 128)