I'm wanting to create a neon sign of a logo for use on a website and also email signature.
I've a couple of questions I'm hoping a kind person can help me with.
For the email signature, I was thinking an animated gif would be best- just to be safe? However, I could use an html template- but I'm unsure the CSS animations used on the website version would render correctly in an (or numerous) email client(s)?
I've found this example of a CSS animated neon sign using typed letters in the mark-up. http://www.broken-links.com/tests/animations/
I was wondering if this same CSS animation technique would work with a flat image? How would the CSS know where the edges of the letters are? Would a transparent png work correctly using this technique? I've got the image as pixel or vector based if that helps?
This is a screen shot of the logo and quick mock up style of neon sign I want to create.
Thanks in advance!
The example you linked uses text only. It uses a #font-face rule to load a custom font, then animates the colour of the font. Its colour is flat.
What you are attempting to do involves rather more. The easiest solution would probably be to separate each letter into its own image, then you can animate the opacity property. This is probably the best you can hope for.
im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
filter: url(/assets/svg/shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.S
This link also explains a lot about drop-shadow and box-shadow - due to the browser support it's not quite what I need for my project, but might be useful for someone else searching this drop shadow CSS trick.
http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
Related
Recently I am visiting a website,
but that website makes not visible a section by blurring it (and wants me to pay to see what there is)
I want that I can read through the blurred part of that website.
I read on the internet that there is some code that can solve this. (maybe with javascript or css)
if someone can help, thanks.
like he said #Dai, is better to pay if you really want that content. this is my suggestion, but I will help you the same
one line answer
just add a * selector with this css code filter: blur(0) !important;
so it will become like this:
* {
filter: blur(0) !important;
}
why does it work?
most of the websites for adding the blurring effect, they use the filter CSS property
if the code I show to you before,
don't work, then try using also backdrop-filter CSS property.
the logic is the same: backdrop-filter: blur(0) !important;
* {
filter: blur(0) !important;
backdrop-filter: blur(0) !important;
}
thank #Dai for the suggestion here!
how to use this code?
open devtools on the page.
CTRL + SHIFT + I
click "+" icon
change the selector to *
add the line of code of before.
how it works?
so we basically reset that blur
to all HTML elements using * selector.
so we don't worry about where there is the
element blurred.
by this, I mean that there are websites that make it difficult to find the element blurred: (for example "news websites", etc...)
by adding multiple filters
or nesting the blurred element
or adding the blur effect inline so normal CSS can't override it.
etc...
use also !important that make the resetting of the filter also in inline style="" attribute
it can't do results all the time
remember: there are also some websites that blur the content, but there isn't any real valuable content behind it (for example "LinkedIn" they do that, etc...)
in this example, you can see there is the same component with the same text, and there isn't any valuable content for you (try maybe in that website it will work)
After looking at Google's new /design, I was wondering if there's any way to accomplish a loading spinner like the one under /progress-activity (Scroll down to "Circular") with HTML / CSS?
I'm only talking about the animation itself. As far as I know it might be next to impossible to round the borders of the spinner like Google did.
I only managed to do a very (very) simple version of this spinner, but I couldn't figure out how to animate the "border" itself (like the spinner in the newest version of Android). Basically I just used border / border-radius: 50%; and an infinite CSS animation to rotate the HTML element (0deg -> 360deg): http://codepen.io/anon/pen/mqiCf
Or do i have to use an "old-school" .gif to get something similar to the "Android L" Spinner?
I think it'd be possible to achieve using SVG, providing whichever browsers you're targeting support the animations required.
I'd use two components: the partially-opaque "growing circle" effect at the start is one element, and the spinning circular outline is a second element.
The aspect which is impossible to achieve using HTML is having the length of the circular arc changing. In SVG, you can achieve that by using an animated stroke dash array. Here's an example of that.
I don't have time at this moment to make a better example, but this is a little closer. I tried what Shomz said in the comment, about using a white loader over the blue one. It isn't perfect, but play around with the timing a bit.
http://codepen.io/anon/pen/bBKJe
I was working on a blur effect That is used in icloud.com website. i have found the blur effect but there was something that i didn't see before.
those were some background properties:
This Background Property Was Used For Blurring:
background-image: -webkit-canvas(blurredDerivativeForButtonsc2094_at_28px);
What Is This "-webkit-canvas" ? how it Works?
And This is For making A gradient Background:
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAQACAIAAAAP+8yGAAACoklEQVR4Xu3dwQ0CMQxEUTtKvbRCC3RqjtwR3g3WSwP/MDOObaIlH89XdJ4VzQcAACBiZzcgMvs1AAAAAFCu3WiR3YCYcKMBACh2AKopgFJBA7Xoo4Fip1TQAEAtkmQASXZlalsAJLk/aC59AICdSQNJ7ge4DwRN0ORAbypociAHgsamliHWmlwkB7oKnZ0caH7lQA40v3LApmqRHPiBAsBCSvsOYCHFpuZkfZEcsCmbsqn2/XSbchGAHLApm3q9D6Cz07YAaB19oZWLaCAHbHoiwBf52BRADtiUTb1KAJAD384B8Gkbzx4APOyWAwAjlKCx6eQky4GgyYGgCZocAAiapSCAoLkPJBnA03QASZZkGgAoFVpHczKAWmQIVIsAAOxNARQ7AAB9kUEcQLn+/gCopgAAbjQ3Gg1cOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANV8aAAAAADwi7Pr/5+DVt2tAQAAgGK3I6oZUANEBgDQtigVACFoYQBhUwBBEzQAORA0NmVTOWBTADYlMptyEQCbEhnAOzsALjpPA88e6rJ3FUTmIi7Sm3IRF3ERkS1miaxUEFmpILJSURN6UyIT2QhlALHxIjKRiUxk+yKTPpGJbNInMpEN4sMARAawDBG06SIL2goi21UIGpFpcJlNjbFENuEQmQY0MGUaQEyZRBY0QRM0U6YpkwZEFjTrHFMmDTS/RCayKdOUacoUNH+4I2hENmX2AIhMZGMskWlgjCUyke2LNF5EJjINiExkGy8bL8uQCSIbxIlspcZFJn0iE1mpsEogsjGWi7iIi4jMRVzERfamAJaC52sAwEUANl5sCsCmXGRG89e6bEoDOWBTADmQAwBBk4MRAABJFjQAAIBqPvdrAPAGv7GBbaSCtb0AAAAASUVORK5CYII=");
And What is This Loooooooong Code For Background?
That looooooooong code for the background is a base64 encoded image, it's a way of embedding image data directly in the webpage.
The webkit-canvas is a webkit only tag, so it only supports chrome and safari. There isn't that much point in learning browser specific CSS as a beginner.
I have a PNG picture representing a monochrome white magnifying glass with an alpha channel. This image is overlayed on the top of other pictures, with a semi-transparent background such that you still see below it:
When you hover that picture, I would like it to change to red, as do textual links per my CSS.
I have considered several options:
Use a 'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D) character. This wouldn't work for the (fewer and fewer) clients that don't support an extensive set of Unicode characters; but when it works, it's not guaranteed to produce a monochrome character (on Apple implementations, it's a full-color emoji).
Use a mask, as described in this other similar question. This only works when you don't mind an opaque background (mine is not opaque) or when you can tell what's underneath your element with great certainty (and then it's rather hackish and ugly).
My current solution is to use a different picture to represent the white magnifying glass and the red magnifying glass that it changes for when you hover over the picture. It's an okay solution, but I was wondering if there was a way I could have just one picture of just one color, so that I don't have to go back to change the image color if I change my mind about the color.
I'm already doing extensive use of CSS3 and HTML5, so I don't mind going deeper as long as it's supported by the latest iterations of each major browser.
Fiddle with the numbers on this to get your color.
img.magnify:hover {
filter: hue-rotate(20deg);
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);
}
Found here - more options available
I have to reproduce this wireframe: http://www.problemio.com/wireframe.pdf
You see the narrow div that has a blue and black background and on the right side has the words "store | support | search"
Is it possible to reproduce that background in css? Or do I need an image for this?
Also, any way to tell what exactly is the html code for that blue?
Thanks!
O_O no... you can't reproduce that kind of random noise background in CSS. You have to use an image. For the color, take a screenshot and open it in GIMP/MS Paint/Photoshop/most any other image editing tool and use the eyedropper to pick out the color. The value you want is the 6 character long one like #FED2E6 or whatever.
It won't be possible to create such a complicated pattern in CSS alone, you'll need to use an image.
It's a bit tricky to know what you mean by the 'blue' colour in the image as there are probably quite a few different shades of blue in there. If you've got access to a copy of Photoshop open the PDF up and use the colour picker to get the blue you want.
Is it possible to reproduce that background in css?
It could possibly be a CSS3 pattern. Here are some nifty examples. But as others have said, there's a lot of random noise in that background, so it's most likely an image.
Also, any way to tell what exactly is the html code for that blue?
Yes, if you have a program like Photoshop or Gimp, you can use a color picker to get the hex code of any pixel you want.
The background on that page looks like an repeat-x of an image. You'll probably need to do something like that.
Update: You could use a .png for the "noise" and set the background color like so:
.menuHeader
{
background-image:url('noise.png');
background-repeat:repeat-x;
background-color: #0000FF; /* whatever you want to set the color to */
}