After hurting my eyes and wasting my time by watching videos of some dude moving squares around on the screen, back and forth, over an over, because they suck at [drawing tool name here]… here’s my golden spiral (more precise than fibonacci’s)
After years of inventing my semantic seo-friendly rating stars system, I realized one of the most impressive rating stars systems out there were having loved because they just SHOW THEM BIG, as any other end-user website choice: Today an image covering the screen with a button in the middle is “a good design”, and flies all go feast with them.
So here is my revamped version of my Rating stars, using no images, scripts, divs, canvas or nothing else other than css and fonts.
3.5 out of 5
(stars) [speak by themselves]
Hover the stars to see what screen readers and search engines see
Resize the screen and the stars will resize as well. No JS. Pure CSS. Including the gradient!
Please if anyone is being pushed by NetworkSolutions (web.com) to buy SiteLock to fix the hack on your shared account, DO NOT buy it, because it won’t work. Read below (and let me know, by replying here)
And please comment here so we can stay in touch for a future lawsuit?
Last week NetWork Solutions (Web.Com) suspended one of our client’s account because of the SoakSoak hack.
They took the time to make a LONG email, explaining WHY they are giving us the names of a few files infected, not the file list, but every time you request the lift of the suspension, the answer with DIFFERENT filenames. A big company like them should have all hacked files in a black list already… but instead of telling you, they partnered with SiteLock. The problem is IT WON’T WORK. I’ll explain you why below.
The problem is SiteLock HASN’T SCANNED IN 4 DAYS, and it won’t.
The first scan still shows “pending” 4 days after the setup. I was told it’s because “I have to verify it”, but I have no idea why the PHP depends on the frond end to run. It might just be useless. And since the site is suspended, it can’t verify your ownership for a second scan, although the FTP credentials were passed from NetworkSolutions.
So Web.Com is SELLING (they bill you under Network Solutions) SiteLock, WHILE IS USELESS for the case.
I contacted NS and they said they’ve been instructed not to offer SiteLock anymore, but I guess that’s the lie for me, because it’s in the notes of my previous call.
Please let me know if you are offered SiteLock for this (or other) subject of suspension. That way we’ll have proofs of them doing it on purpose.
Opposite excuses by their reps show they sell it on purpose:
They stated not to profit from that, but the bill comes from them.
The first email said there were INFECTED files (didn’t say “some of your files”) so they KNOW they are not just your stuff. They KNOW HOW and WHICH files are infected
They first rep stated the email advicing “…or using SiteLock to remove all infected…” was automated… but the third email DIDN’T suggest installing SiteLock. Either it’s taken out automatically because the sale was complete, or the email was manually edited.
The last rep apologized by the bad information the others provided me, and admitted the email was edited manually. So they COULD have pasted the whole list of known hacked files…
The first rep told me they KNEW the infected file is sending the emails (I pointed out the mentioned file was a JOOMLA file, this website runs on WordPress). The last rep even mocked me “Unfortunately hackers do not make the subject of the email say what file is sending it.”
This animation DOESN’T use Rotatation at all. Nor 3D/2D transformations.
Why aren’t there yet “animator” apps or online tools to animate objects along a path without canvas or JS?
Time ago I contacted a few key people, those who take good ideas, make an API or mixin for others to enjoy it, enjoy the fame themselves and don’t try to make money with it.
None of them even responded. I wonder whether they are building their own app/script?
How can it be possible with pure CSS?
If you convert hand-drawn strokes or any other curve into 2-node bezier curves, and extract separate x and y translation-over-time curves, you can make them into easing functions, getting a tranlation across the screen using just timeframes.
If you’ve ever seen a vinil router, the head only moves in the x axis – it would make the x easing – and the roll only moves back and forth – making the y easing. Bot move in their own axis, and yet they draw CURVES, without rotating the media, just by accelerating and descelerating over time.
Those movements can be separated into easing functions, like an image is traced, and each curve can made into a bezier easing function.
The technology to convert curves into vectors is open source. The technology to split them into 2-node bezier exists too. What are we wating for?
Havent’ you ever wished to be able to use user-uploaded images (not carefully chosen with extra background) as the backdrop for their titles, and yet make the text on top READABLE?… NOT using tex-shadow or a hard box? Not even a blurry box or gradient?…
What about a progressive blurry background like Photoshop’s lens blur, that is less-blurry on the outside but blurrier in the inside, right under the text, so the blurred part doesn’t mix with the straight edges but rather makes a nice bokeh…
What about making it animated on hover?
As usual, without extra markup (or I could make the blur even more subtle on the outer area where it merges with the un-blurred image) and without JS or SVG. Pure webkit and flex boxes, or you could do it with tables and inline-block, but I guess IE will hate that. Bleep IE though.
Try it at full screen, because the hover is on the whole row (it needs to affect the overlay too. Unless you want to US JS to affect the parent style/class when the text is hovered).
A few tips – so you don’t think it was easy:
There were needed two blurred images. So the large blurred is not merged directly with sharp edges, which makes it ugly.
The blur areas could be extended with ems, so it would change on window-resize, but since my image box is fixed height, I used pixels.
Resizing text with vw units will fail in pixel densities other than 1:1 if you don’t provide a reduction to compensate it for EACH existing screen density out there (Remember: 50%% of an iPhone screen is 320px, which in CSS will fill the screen!)
Each blurred image has its own overlay as an extra background-image gradient.
Each transition requires different delay and easing to ensure you won’t get a black blurry patch. Remember: except in linear transitions (too robotic to look smooth) 50% into the animation, no object is at 50% opacity, and the average between them PLUS the black overlays, gives unexpected results. It’s like video/audio mixer console faders: they transition with a smooth curve, but never linear, because the average of 50% + 50% is a washed out tone in video or too loud in audio.
Testing different compression settings using WordPress uploader is a slow process, so I recommend you to try it in PhotoShop or any online photo editor first, and then using the value that suits your eye in this function.