i have from the Website Designer the follwoing result : http://mp-books.ru/html/img/result_03.jpg
The ideea is that the stamp-like frame will remain on the page, but the person picture will change from case to case, will be take from the database.
I have arrived at this result : http://jsfiddle.net/alexpeta/MUpk8/1/ but thats the best i can do.
I have experimented with rotate like
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform:rotate(-18deg);
-o-transform:rotate(-18deg);
but IE will not allow this transformation becuse it has Filter with an exact number of degrees : eg: 45, 90, 180 etc... and the customer wants the pic titled in each browser.
Any help on this brain-buster?
Regards,
Alex
You can use a MATRIX transformation on the image
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.951, M12=0.309,
M21= -0.309, M22=0.951);
would correspond to 18 degrees
The calculations:
[cos(18) sin(18)]
[-sin(18) cos(18)]
The best solution for compatibility would be to transform the image on the server side using System.Drawing. As for the frame overlay, I think you're over-complicating things: if you know what the background will always look like, don't cut the frame out as a transparent image, cut it out with the background in it so it hides any overflow from the picture.
The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object.
checkout this solution
Related
I want to set background on my website like the one one tailwindcss.com. How can I accomplish this?
Tailwind Website
Still wondering how is this implemented.
Having inspected the Tailwind website for you, it appears they use a simple JPG image as the header background. Since it's not SVG, I can't know how it was made.
Another way to do this, a different approach to #Gugalcrom123's, is to use a css gradient.
Method 1. You can use a website such as this:
https://cssgradient.io/ to come up with the gradient and set that as a background. The website also generates you the code you can use to set it as the background, as well as a regular color fallback in case your browser does not support it. This is where Tailwind probably decided to use method 2.
Method 2. You can use GIMP, Photoshop or some similar drawing tool to draw a gradient, and put it as an image. You can also use Filter: blur() on the img in css to blur it with pixels or even use your drawing tool to blur it out! To make the grid, you can do a similar thing, except after drawing the grid, put it behind the gradient layer and set the gradient layer's opacity to something lower than 100%, so the grid shows behind it.
You can blur it using a filter: blur(10px); on CSS... But be careful, it might make your site slow.
Also, have a look at SVG FILTERS here: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
I'm having several buttons that I want to get darker when user hovers over. Which method is better (faster, more efficient, more safe in terms of browser compatibility):
Create 2 separate .png images, one normal one _hover
Use transition:opacity css property.
Images are small, each approx. 600 bytes big (20x20 pxl), but having approximately 30 of them makes me wonder which method is better in terms of speed efficiency and older browsers support (but not to the point trying to please IE6 either)
if opacity is doing your job of darkening the image- Use it.
You said darkening image? so i assume u start with lower opacity value and chage to something higher.opacity is more like transparency of the pic-dosent darken it.
If opacity is not giving the desired results you can use hover change of image-use image sprites this way you dont have to request for 60 svg's(30 svgs considering you use a combination of 2 pics instead of one)
LINK for sprites.
I suggest using SVG filter gives you better image effects-Browser support
i was looking for a way to display plain text ( 2d or 3d ) in a threeJS Scene , and apply some css effects to them , i looked around for a while and i came across this . probably what i wanted ..
now the problem is that when i aplly a animate.css ( well knows css animation library ) class to html element , the position of my CSS3D Object is reseted and fliped ( can't explain why )
'http://jsfiddle.net/kd9Tc/4/'
note :
-i think this code example illustrates pretty well what i am trying to do , apply css text effects in webGL Scene ( i need all the camera movement and tweening ) .
i tried THREE.TextGeometry first , but i wanted the text to be in a language other than english and converting the font properly let to nowhere ( displayd ' ?????? ' in all my tests ) and beside that , i've been using css transforms for a while now and i'm pretty comfortable with them , and working with them is much easier for me .
overall the main reason i'm using threeJS is camera movement capability .
i'm glad that i used threeJS beacuse it open's the door to many other features as well , but yet , i'm not sure i;m using ther right tool here :-?
thanks
When you apply a CSS transform on an element drawn by ThreeJS' CSS3DRenderer, it overrides an initial translation and rotation originally set by the renderer itself.
After looking at your fiddle and then looking at the CSS3DRenderer in GitHub I can assess that the renderer does some toying around with the CSS translation and rotation of the elements within, before drawing them, in order to show what you'd expect out of the box (versus what's logical taking into account the way TheeJS handles its coordinates).
Here are the specific lines which I'm referring to. (ThreeJS GitHub)
In order to apply CSS transforms effectively across CSS3DRenderer be sure to not override the translation and rotation transforms. Simply put, take the following into account as the relative origin to every transform:
translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg)
For example this:
-webkit-transform: none;
transform: none;
Would become this:
-webkit-transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
Here's a modified version of your fiddle which now works somewhat as expected.
(I didn't take the time to correct the X-axis translates, but you should get the gist of what I'm saying.)
Another way of working around this problem would be to somehow extend the CSS3DRenderer so that it corrects the rotate transforms on the fly instead of only at instantiation.
Why is the renderer doing this?
My best guess is that when the renderer was coded, they were expecting transforms to be applied via JavaScript and not CSS.
If you're truly more comfortable with CSS transforms I'd say go right ahead with what you are using. On the other hand if you feel a little more adventurous I'd suggest using TweenJS for animations with ThreeJS. They play quite well together. I use them on my website (link on my profile).
P.S.
#KianP Kudos on the fiddle you've put up. I can honestly say you are working on some pretty interesting stuff and you're using a set of tools that I wouldn't have thought of using together (Animate.css and ThreeJS) but seem to work quite well (Taking into account you correct the positioning as explained above).
I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
I'm building an interactive website for a touchscreen, which runs the latest version of Google Chrome. The user has to tap on, in this case, a series of buildings to get more information about it. The idea is to absolute position hyperlinks and place them on top of the buildings, which are combined in a single background image. But as you can see below, the problem is that some hyperlinks overlap. The chance that the user taps on the wrong building without knowing, is quite large.
Because I already have the vector masks of each building, I thought it would be a good idea to not use hyperlinks, but use SVG files instead. SVG files support a tag called xlink, which you can use to make a vector object linkable. The clickable area which links to another file is not a square anymore, but has the same shape as the vector mask. So just like I did with the hyperlinks, I placed them on top of the buildings. This works fine in Firefox, but not in Chrome nor Safari! Apparently there's a bug in Webkit (bugs.webkit.org/show_bug.cgi?id=22986) which causes the browser to always show a white background and which neglects the shape of the vector object, so it's rendered as a square object.
Screenshot: Overlapping hyperlinks and Webkti SVG Bug
Normally the opacity of the SVG embed would be set to zero, but to show you what's going wrong I've set it to 1.
Using Firefox instead is not an option. And the area-tag in HTML takes too much time. So I'm stuck. Does anyone know another solution for this particular problem?
You need to transform masks to <path>s
Create <a><path/></a> after all svg code (strict condition for Safari!)
Set <path>s opacity and fill-opacity to 0
Don't forget <a> target attribute