#css only blob animation | Explore Tumblr posts and blogs

mostlysignssomeportents · 5 years ago

Text

Pluralistic, your daily link-dose: 28 Feb 2020

Today's links

Clearview AI's customer database leaks: Sic semper grifter.

The Internet of Anal Things: Recreating Stelarc's "Amplified Body" with an IoT butt-plug.

Oakland's vintage Space Burger/Giant Burger building needs a home! Adopt a googie today.

Fan-made reproduction of the Tower of Terror: Even has a deepfaked Serling.

Drawing the Simpsons with pure CSS: Impractical, but so impressive.

Let's Encrypt issues its billionth cert: 89% of the web is now encrypted.

AI Dungeon Master: A work in progress, for sure.

How to lie with (coronavirus) maps: Lies, damned lies, and epidemiological data-visualizations.

This day in history: 2019, 2015

Colophon: Recent publications, current writing projects, upcoming appearances, current reading

Clearview AI's customer database leaks (permalink)

Clearview is the grifty facial recognition startup that created a database by scraping social media and now offers cops secretive deals on its semi-magic, never-peer-reviewed technology. The company became notorious in January after the NYT did a deep dive into its secretive deals and its weird, Trump-adjascent ex-male-model founder.

(the Times piece was superbly researched but terribly credulous about Clearview's marketing claims)

https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html

Yesterday, Clearview warned its customers that it had been hacked and lost its customer database. Today, that customer database was published.

https://www.buzzfeednews.com/article/ryanmac/clearview-ai-fbi-ice-global-law-enforcement

It seems that the NYT weren't the only ones to take Clearview's marketing claims at face value. Its client list includes the DoJ, ICE, Macy's, Walmart, and the NBA. All in all the dump includes more than 2,200 users, including "law enforcement agencies, companies, and individuals around the world."

Included: state AGs, university rent-a-cops, and clients in Saudi Arabia.

"BuzzFeed News authenticated the logs, which list about 2,900 institutions and include details such as the number of log-ins, the number of searches, and the date of the last search."

What does Clearview, a sercurity company, say about this ghastly security breach? "Unfortunately, data breaches are part of life in the 21st century."

Big shrug energy.

"Government agents should not be running our faces against a shadily assembled database of billions of our photos in secret and with no safeguards against abuse," ACLU attorney Nathan Freed Wessler, said to BuzzFeed News.

It is amazing that this needs to be said.

"More than 50 educational institutions across 24 states named in the log. Among them are two high schools."

They are:

Central Montco Technical High School in Pennsylvania

Somerset Berkley Regional High School in Massachusetts

The log also has an entry for Interpol.

The Internet of Anal Things (permalink)

In 1994, the notorious/celebrated electronic artist Stelarc did a performance called "Amplified Body" in which he "controlled robots, cameras and other instruments by tensing and releasing his muscles"

https://web.archive.org/web/20120712181429/https://v2.nl/events/amplified-body

Now, artist/critic Dani Ploeger has revisited Amplified Body with his own performance, which is very similar to Stelarc's, except all the peripherals are controlled by Ploeger tensing and releasing his anal sphincters around a smart butt-plug.

https://www.daniploeger.org/amplified-body

He calls it "B-hind" and it's a ha-ha-only-serious. The buttplug is "an anal electrode with EMG sensor for domestic treatment of faecal incontinence," and the accompanying text is a kind of art-speak parody of IoT biz-speak.

https://we-make-money-not-art.com/b-hind-celebrating-the-internet-of-anal-things

"B-hind offers a unique IoT solution to fully integrate your sphincter muscle in everyday living. The revolutionary anal electrode-powered interface system replaces conventional hand/voice-based interaction, enabling advanced digital control rooted in your body's interior. Celebrating the abject and the grotesque, ‍B‒hind facilitates simple, plug-and-play access to a holistic body experience in the age of networked society."

B-hind was produced in collaboration with V2_, the Lab for the Unstable Media in Rotterdam, and In4Art.

Oakland's vintage Space Burger/Giant Burger building needs a home! (permalink)

Giant Burger was once an East Bay institution, known for its burgers and its gorgeous googie architecture.

https://localwiki.org/oakland/Giant_Burger

One of the very last Giant Burger buildings is now under threat. Though the Telegraph Ave location was rescued in 2015 and converted to a "Space Burger," it's now seeking a new home because it is in the path of the Eastline project.

https://insidescoopsf.sfgate.com/blog/2015/02/24/space-burger-launches-in-uptown-oakland/

The Oakland Heritage Alliance is hoping someone will rescue and move the building: " Do you have an idea for a new location for this mid-century icon? Please contact [email protected] if you know of an appropriate lot, project, or site, preferably downtown."

(Image CC BY-SA, Our Oakland)

Fan-made reproduction of the Tower of Terror (permalink)

Orangele set out to re-create the Walt Disney World Twilight Zone Tower of Terror elevator loading zone in the entry area to their home theater. He's not only done an impressive re-make of the set, but he's also augmented it with FANTASTIC gimmicks.

https://www.hometheaterforum.com/community/threads/the-tower-of-terror-theater.365747/

It's not merely that's he's created a rain, thunder and lightning effect outside the patio doors…

https://www.youtube.com/watch?v=4QMzN0v4mJQ

Nor has he merely created props like this gimmicked side table that flips over at the press of a button.

https://www.youtube.com/watch?v=kY7gQLMnbeA

He's also created HIS OWN ROD SERLING DEEPFAKE.

https://www.youtube.com/watch?time_continue=2&v=MIsjYJwOXSU

I kinda seriously love that he left Rod's cigarette in. The Disney version looks…uncanny.

Not shown: "exploding fuse box with simulated smoke and fire, motorized lighted elevator dial, motorized/lighted pressure gauge, video monitor playing Tower of Terror ride sequence seen through the elevator door wrap, motorized "elevator door'"

He notes, "I was once married, but now as a single person, I can do whatever I want, haha. NEVER getting married again."

Drawing the Simpsons with pure CSS (permalink)

Implementing animated Simpsons illustrations in CSS isn't the most practical web-coding demo I've seen, but it's among the most impressive. Bravo, Chris Pattle!

(not shown: the eyes animate and blink!)

https://pattle.github.io/simpsons-in-css/

#bart .head .hair1 { top: 22px; left: 0px; width: 6px; height: 7px; -webkit-transform: rotate(-22deg) skew(-7deg, 51deg); -ms-transform: rotate(-22deg) skew(-7deg, 51deg); transform: rotate(-22deg) skew(-7deg, 51deg); }

I especially love the quick-reference buttons to see the raw CSS. It reminds me of nothing so much as the incredibly complex Logo programs I used to write on my Apple ][+ in the 1980s, drawing very complicated, vector-based sprites and glyphs.

https://github.com/pattle/simpsons-in-css/blob/master/css/bart.css

Most interesting is the way that this modular approach to graphics allows for this kind of simple, in-browser transformation.

Let's Encrypt issues its billionth cert (permalink)

When the AT&T whistleblower Mark Klein walked into EFF's offices in 2005 to reveal that his employers had ordered him to help the NSA spy on the entire internet, it was a bombshell.

https://www.eff.org/tags/mark-klein

The Snowden papers revealed the scope of the surveillance in fine and alarming detail. According to his memoir, Snowden was motivated to blow the whistle when he witnessed then-NSA Director James Clapper lie to Senator Ron Wyden about the Klein matter.

Since that day in 2005, privacy advocates have been fretting about just how EASY it was to spy on the whole internet. So much of that was down to the fact that the net wasn't encrypted by default.

This was especially keen for @EFF. After all, we made our bones by suing the NSA in the 90s and winning the right for civilians to access working cryptography (we did it by establishing that "Code is speech" for the purposes of the First Amendment).

https://www.eff.org/deeplinks/2015/04/remembering-case-established-code-speech

Crypto had been legal since 1992, but by Klein's 2005 disclosures, it was still a rarity. 8 years later — at the Snowden moment — the web was STILL mostly plaintext. How could we encrypt the web to save it from mass surveillance?

So in 2014, we joined forces with Mozilla, the University of Michigan and Akamai to create Let's Encrypt, a project to give anyone and everyone free TLS certificates, the key component needed to encrypt the requests your web-server exchanges with your readers.

https://en.wikipedia.org/wiki/Let%27s_Encrypt

Encrypting the web was an uphill climb: by 2017, Let's Encrypt had issued 100m certificates, tipping the web over so that the majority of traffic (58%) was encrypted. Today, Let's Encrypt has issued ONE BILLION certs, and 81% of pageloads use HTTPS (in the USA, it's 91%)! This is astonishing, bordering on miraculous. If this had been the situation back in 2005, there would have been no NSA mass surveillance.

Even more astonishing: there are only 11 full-timers on the Let's Encrypt team, plus a few outside contractors and part-timers. A group of people who could fit in a minibus managed to encrypt virtually the entire internet.

https://letsencrypt.org/2020/02/27/one-billion-certs.html

There are lots of reasons to factor technology (and technologists) in any plan for social change, but this illustrates one of the primary tactical considerations. "Architecture is Politics" (as Mitch Kapor said when he co-founded EFF), and the architectural choices that small groups of skilled people make can reach all the way around the world.

This kind of breathtaking power is what inspires so many people to become technologists: the force-multiplier effect of networked code can imbue your work with global salience (for good or ill). It's why we should be so glad of the burgeoning tech and ethics movement, from Tech Won't Build It to the Googler Uprising. And it's especially why we should be excited about the proliferation of open syllabi for teaching tech and ethics.

https://docs.google.com/spreadsheets/d/1jWIrA8jHz5fYAW4h9CkUD8gKS5V98PDJDymRf8d9vKI/edit#gid=0

It's also the reason I'm so humbled and thrilled when I hear from technologists that their path into the field started with my novel Little Brother, whose message isn't "Tech is terrible," but, "This will all be so great, if we don't screw it up."

https://craphound.com/littlebrother

(and I should probably mention here that the third Little Brother book, Attack Surface, comes out in October and explicitly wrestles with the question of ethics, agency, and allyship in tech).

https://us.macmillan.com/books/9781250757531

AI Dungeon Master (permalink)

Since 2018, Lara martin has been using machine learning to augment the job of the Dungeon Master, with the goal of someday building a fully autonomous, robotic DM.

https://laramartin.net/

AI Dungeon Master is a blend of ML techniques and "old-fashioned rule-based features" to create a centaur DM that augments a human DM's imagination with the power of ML, natural language processing, and related techniques.

She's co-author of a new paper about the effort, "Story Realization: Expanding Plot Events into Sentences" which "describes a way algorithms to use "events," consisting of a subject, verb, object, and other elements, to make a coherent narrative."

https://aaai.org/Papers/AAAI/2020GB/AAAI-AmmanabroluP.6647.pdf

The system uses training data (plots from Doctor Who, Futurama, and X-Files) to expand text-snippets into plotlines that continue the action. It's a bit of a dancing bear, though, an impressive achievement that's not quite ready for primetime ("We're nowhere close to this being a reality yet").

https://www.wired.com/story/forget-chess-real-challenge-teaching-ai-play-dandd/

This may bring to mind AI Dungeon, the viral GPT-2-generated dungeon crawler from December.

https://aidungeon.io/

As Will Knight writes, "Playing AI Dungeon often feels more like a maddening improv session than a text adventure."

Knight proposes that "AI DM" might be the next big symbolic challenge for machine learning, the 2020s equivalent to "AI Go player" or "AI chess master."

How to lie with (coronavirus) maps (permalink)

The media around the coronavirus outbreak is like a masterclass in the classic "How to Lie With Maps."

https://www.press.uchicago.edu/ucp/books/book/chicago/H/bo27400568.html

Self-described "cartonerd" Kenneth Field's prescriptions for mapmakers wanting to illustrate the spread of coronavirus is a superb read about data visualization, responsibility, and clarity.

https://www.esri.com/arcgis-blog/products/product/mapping/mapping-coronavirus-responsibly/

Both of these images are representing the same data. Look at the map and you might get the impression that coronavirus infections are at high levels across all of China's provinces. Look at the bar-chart and you'll see that it's almost entire Hubei.

Here's a proposed way to represent the same data on a map without misleading people.

Another point that jumped out: stop coloring maps in red!

"We're mapping a human health tragedy that may get way worse before it subsides. Do we really want the map to be screaming bright red? Red can connotate death, still statistically extremely rare for coronavirus."

This day in history (permalink)

#5yrsago Ad-hoc museums of a failing utopia: photos of Soviet shop-windows https://boingboing.net/2015/02/28/ad-hoc-museums-of-a-failing-ut.html

#5yrsago First-hand reports of torture from Homan Square, Chicago PD's "black site" https://www.theguardian.com/us-news/2015/feb/27/chicago-abusive-confinment-homan-square

#1yrago EFF's roadmap for a 21st Century antitrust doctrine https://www.eff.org/deeplinks/2019/02/antitrust-enforcement-needs-evolve-21st-century

#1yrago Yet another study shows that the most effective "anti-piracy" strategy is good products at a fair price https://www.vice.com/en_us/article/3kg7pv/studies-keep-showing-that-the-best-way-to-stop-piracy-is-to-offer-cheaper-better-alternatives

#1yrago London's awful estate agents are cratering, warning of a "prolonged downturn" in the housing market https://www.bbc.com/news/business-47389160

#1yrago Bad security design made it easy to spy on video from Ring doorbells and insert fake video into their feeds https://web.archive.org/web/20190411195308/https://dojo.bullguard.com/dojo-by-bullguard/blog/ring/

#1yrago Amazon killed Seattle's homelessness-relief tax by threatening not to move into a massive new building, then they canceled the move anyway https://www.seattletimes.com/business/amazon/huge-downtown-seattle-office-space-that-amazon-had-leased-is-reportedly-put-on-market/

#1yrago The "Reputation Management" industry continues to depend on forged legal documents https://www.techdirt.com/articles/20190216/15544941616/pissed-consumer-exposes-new-york-luxury-car-dealers-use-bogus-notarized-letters-to-remove-critical-reviews.shtml

Colophon (permalink)

Today's top sources: Allegra of Oakland Heritage Alliance, Waxy (https://waxy.org/), We Make Money Not Art (https://we-make-money-not-art.com/), Sam Posten (https://twitter.com/Navesink), Slashdot (https://slashdot.org), Kottke (https://kottke.org) and Four Short Links (https://www.oreilly.com/feed/four-short-links).

Hugo nominators! My story "Unauthorized Bread" is eligible in the Novella category and you can read it free on Ars Technica: https://arstechnica.com/gaming/2020/01/unauthorized-bread-a-near-future-tale-of-refugees-and-sinister-iot-appliances/

Upcoming appearances:

Canada Reads Kelowna: March 5, 6PM, Kelowna Library, 1380 Ellis Street, with CBC's Sarah Penton https://www.eventbrite.ca/e/cbc-radio-presents-in-conversation-with-cory-doctorow-tickets-96154415445

Currently writing: I just finished a short story, "The Canadian Miracle," for MIT Tech Review. It's a story set in the world of my next novel, "The Lost Cause," a post-GND novel about truth and reconciliation. I'm getting geared up to start work on the novel now, though the timing is going to depend on another pending commission (I've been solicited by an NGO) to write a short story set in the world's prehistory.

Currently reading: Just started Lauren Beukes's forthcoming Afterland: it's Y the Last Man plus plus, and two chapters in, it's amazeballs. Last week, I finished Andrea Bernstein's "American Oligarchs" this week; it's a magnificent history of the Kushner and Trump families, showing how they cheated, stole and lied their way into power. I'm getting really into Anna Weiner's memoir about tech, "Uncanny Valley." I just loaded Matt Stoller's "Goliath" onto my underwater MP3 player and I'm listening to it as I swim laps.

Latest podcast: Gopher: When Adversarial Interoperability Burrowed Under the Gatekeepers' Fortresses: https://craphound.com/podcast/2020/02/24/gopher-when-adversarial-interoperability-burrowed-under-the-gatekeepers-fortresses/

Upcoming books: "Poesy the Monster Slayer" (Jul 2020), a picture book about monsters, bedtime, gender, and kicking ass. Pre-order here: https://us.macmillan.com/books/9781626723627?utm_source=socialmedia&utm_medium=socialpost&utm_term=na-poesycorypreorder&utm_content=na-preorder-buynow&utm_campaign=9781626723627

(we're having a launch for it in Burbank on July 11 at Dark Delicacies and you can get me AND Poesy to sign it and Dark Del will ship it to the monster kids in your life in time for the release date).

"Attack Surface": The third Little Brother book, Oct 20, 2020.

"Little Brother/Homeland": A reissue omnibus edition with a very special, s00per s33kr1t intro.

7 notes · View notes

fitnesspiner · 3 years ago

Text

Safari technology preview 120

#Safari technology preview 120 update#

Fixed video appearing blank with only audio playing if video element isn’t appended to the DOM tree ( r284741).Added support for requestVideoFrameCallback API for MediaStreamTrack-based backends ( r284528).Changed to obtain consent to create a new credential when the platform authenticator is in excludedCredentials. This improves compliance with the WebAuthn spec (Step 3.1 of makeCredential).Ensured CanvasRenderingContext2D.drawImage(video) uses the right color space ( r284439).Fixed misplaced position: fixed content with async-scrollable iframes when switching tabs ( r284738).Updated smooth scroll animations to run at 120Hz on 120Hz displays ( r285094).Updated appearance of indicator ( r284626).Fixed the intrinsic size of a picture image inside a template ( r284667).Fixed selection extend() with no ranges to trigger an exception ( r285084).Fixed Origin of opaque blob: URLs to be null instead of an empty string ( r284478).Fixed JavaScript URL result to be treated as UTF-8 bytes ( r284934).Fixed form submission to be cancelled if the form gets detached from inside the formdata event handler ( r284660).Fixed form navigations with target=”_blank” to not have an opener ( r284821).Fixed document.open() and friends to use the correct document as a source for reset document’s URL ( r284758).Fixed changing the src attribute of the element inside an ImageDocument to trigger a load ( r284901).Exposed MediaCapabilities to Workers ( r284443).Added support for rel=��noopener/noreferrer” on elements ( r284749).Enabled lazy image loading by default ( r284995).Fixed opacity to flatten when combined with transform-style: preserve-3d ( r285021).style to be readable when it includes a var() ( r285015) Fixed percentages on orthogonal replaced children ( r284548).Fixed CSS serialization affecting grid-auto-flow ( r284876).Fixed box-shadow and text-shadow to yield float values while interpolating ( r284437).Fixed -webkit-background-clip: text to paint correctly for inline box spanning multiple lines ( r284380).Fixed sizing of orthogonal elements with percentage margins ( r284773).Prevented clamping flex base size with min-height, max-height, min-width, and max-width ( r284397).Fixed :host invalidation when combined with pseudo classes in descendant position ( r285100).Serialized :part() argument as identifier ( r284863).Allowed :is and :where after all pseudo elements ( r285054).Added support for more CSS properties for ::marker ( r284519).Added support for ::before and ::after pseudo elements after ::slotted ( r284973).Added support for contain: style for counters ( r284642, r284755).Added flex-basis: content support ( r284440).Added support for small svw/ svh/ svmin/ svmax, large lvw/ lvh/ lvmin/ lvmax, and dynamic dvw/ dvh/ dvmin/ dvmax viewport units ( r284628).Enabled accent-color by default ( r284634).Media queries affect Cascade Layer order ( r284859).Added support for the acceptInsecureCerts capability ( r285164).Fixed “testForLinkLabels” Accessibility audit to ignore anchors if aria-hidden ( r284986).Note: Tab Groups do not sync in this release. The preview is available for both macOS Monterey and macOS Big Sur.

#Safari technology preview 120 update#

The update addresses a Safari issue where the current version of Safari appears to be limited to a 60Hz refresh rate despite the fact that the new machines support refresh rates up to 120Hz. Safari Technology Preview‌ release 135 includes 120Hz Safari scrolling on displays that support 120Hz refresh rates. The preview version of Apple’s popular browser offers developers and other interested users the ability to try out features that may or may not, debut in future public release versions of Safari. Apple on Monday released Safari Technology Preview 135, the latest version of their developer preview web browser.

#Safari technology preview 120

0 notes

mbaljeetsingh · 7 years ago

Text

15 Interesting JavaScript and CSS Libraries for April 2018

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

Radi is a fast and easy to use front-end javascript framework. It offers a simple way to build single-page or more complex applications. It is really tiny, only 3kb minified and gzipped, doesn't use any diffing algorithms or virtual dom, and requires no dependencies.

This is a JavaScript library for uploading any type of files. You can drop or copy and paste files, browse the filesystem or just use the API. It works with directories, local and remote URLs, and blobs. The library has a built in image optimization and automatic image resizing and cropping.

This is an open-source Bootstrap 4 Dashboard Theme. It is completely responsive, easy to integrate, follows the Bootstrap's coding conventions, and has a number of different customizable components to choose from. Tabler has great support for all modern browsers.

With Driver.js you can highlight items on your page, in order to attract the users attention. It is user-friendly, extremely lightweight and highly customizable. The library is licensed under MIT and works well on all browsers.

Rough.js is a lightweight canvas based library that can be used for drawing figures and shapes as if they were hand-drawn. It offers tools for drawin lines, curves, arcs, polygons and other shapes. The library also supports drawing SVG paths.

With this library you can print horizontal bar charts in your terminal. It is really simple to work with. You just need to pass an array in the command line, and the library will generate good lookin charts with legend and scale.

This is an open-source JavaScript library for creating beautiful charts for data visualization. It supports a large number of chart types such as bar, line, pie, heatmap and more. They are easy to use, highly customizable and work great on all browsers including IE8.

Material Design Icons is a simple, modern and beautiful icon set created by Google. It includes more than 900 icons, customized only with CSS. The icons are vector-based and look great on all screensizes, retina displays and low-dpi screens.

This is a modern, modular tool for compressing CSS files. It takes your CSS files and performs a number of optimizations, to compress your code as much as possible for a production environment. It removes whitespace, comments, unnecessary definitions and duplicate styles.

This is a JavaScript library for capturing keyboard input and key presses. It is very simple and user-friendly, has no dependencies and works on IE 6+, Safari, Firefox and Chrome. Special care must be taken when using it alongside other libraries, as it might interfere with keyboard handling.

TensorFlow is an open-source library for defining,training and deploying machine learning models in your browser. It allows you to build neural networks from scratch using high-level APIs and import, run and retrain existing models. What is more, TensorFlow supports WebGL and can work with GPU acceleration.

With Hover.css you can add a wide variety of hover effects and animations to links, buttons and images in your page. The code is self-contained and you can copy-paste it directly in your project, and is available in CSS, Sass and Less. The effects may not work on older browsers, because most of them use CSS3 features like transorms and transitions.

Sympact is a minimal library for calculating the CPU and memory usage of tasks in Node.js. It executes a script and evaluates its execution time, CPU usage, and memory usage, then returns a report containing the averages of the results. In addition, it comes with a CLI for a better user experience.

Leaflet is an open-source library for creating interactive maps. It offers some of the most important features for a map library like markers, layers, zooming and many more. It works on all major desktop and mobile platforms, has no external dependencies, and can be extended with a large number of plugins.

This is a functional promise library built with async/await. It is an alternative to the Bluebird.js library. What is more, it supports Tree Shaking, which means that you can use only the modules that you need and leave the rest, so it could end up really small in size.

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework.

Learn more

via Tutorialzine https://ift.tt/2Gxz7BB

#IFTTT #Feedly

0 notes

holytheoristtastemaker · 5 years ago

Link

“You’re only as good as the tools you use” This saying has been around for years and highlights the importance of using the correct tool for the job. This motto applies to hundreds of different fields and disciplines, and luckily for us, to the design too. From my experience as a senior product designer, there is almost nothing more important than the correct tools to create a nice user interface. The right set of pictures or a well-balanced colour palette can make a huge difference between a poor and decent UI. I’m going to share a list of free and very useful resources/tools that I use daily to create users interfaces (websites, landing pages, web applications, etc…) for my clients, and for my projects Cruip and SaaS Landing Page. To allow you to easily find a specific set of resources/tools, I divided the list into different categories:

Photos & Videos

Illustrations

Palette

Typography

Animations & Effects

Iconography

Patterns & Shapes

Utility

So if you’re looking for a free set of icons, just jump to the iconography category. A final note: This list doesn't include some of the most popular resources to create user interfaces like Unsplash (for the Photos & Videos category), or Google Fonts (for the Typography one). Why? You probably already know them. 50+ free tools and resources to create amazing UIs:

Photos & Videos

Coverr

Beautiful, free videos for your homepage background.

Mixkit

Awesome stock video clips, stock music & premiere pro templates all completely free!

Pexels

The best free stock photos & videos shared by talented creators.

Photo Creator

Create realistic stock photos from thousands of models, objects, and backgrounds.

Unscreen

Remove video and GIF backgrounds 100% automatically.

Remove Background

Remove the background of any image 100% automatically.

Generated Photos

The most practical way to get high-quality generated faces for commercial content.

Duotone

Convert any photo to a duotone in seconds.

Illustrations

Open Peeps

100% free hand-drawn illustration library.

Smash Illustrations

Free mix & match illustration constructor.

Open Doodles

A collection of free sketchy illustrations.

Control Illustrations

108 free flat illustrations with customisable characters.

Ouch!

Free vector illustrations to class up your project.

Avataaars Generator

A simple web app for generating hand-drawn avatars.

Faux Code Generator

Turn real code (Github Gist) into faux code (SVG image).

Palette

Parametric Color Mixer

A colour palette composer inspired by audio parametric equalisers.

CSS Gradient

A simple and colorful CSS gradient generator.

Colorsinspo

Thousands of beautiful colour palettes you can use in one click.

Color Hexa

A free colour tool providing information about any colour and generating matching colour palettes, shades/tints for your designs.

Color Space

Generate nice colour palettes, gradients, and matching colour schemes for your next project!

Palettte App

Create, analyse and edit smooth colour palettes.

Colorable

A colour combination contrast tester.

Typography

Freebiesbug (free fonts)

Handpicked free fonts and typefaces for web and graphics designers.

Fonts Arena

Free fonts, and free alternatives to premium fonts.

Befonts

Download the free fonts for personal or commercial use.

Font Squirrel

Download thousands of completely legal, high quality, free fonts.

Fontjoy

Easily mix and match different Google Fonts for the perfect pairing.

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different web fonts.

Animations & Effects

Smooth Shadow Generator

Make a smooth shadow with easing curves.

CSSeffectsSnippets

A collection of CSS effects made with Vue.js.

Separator Generator

A collection of customisable CSS section separators, with the possibility to easily copy the code.

Animista

A place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Draggable

A lightweight, responsive, modern drag & drop library.

Block Reveal Effects

Ideas for revealing content in a schematic box look.

Iconography

IconStore

A library of free vector icons for personal and commercial projects, designed by first-class designers.

CSS Icons

Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM & API.

Icon Transition Generator

Create a snappy transition between two icons and download the SVG code.

Tilda Icons

A collection of 700+ free icons for landing pages.

Ikonate

Fully customisable & accessible vector icons.

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Animated Icons

400 free animated icons downloadable in JSON for Lottie, GIF, and After Effects format.

Patterns & Shapes

CSS Patterns

CSS only library to fill your empty background with beautiful patterns.

Get Waves

A simple web app to generate svg waves, unique every time.

Blob Maker

Create organic SVG shapes in just a few seconds.

Rad Lines

A web tool for generating SVGs of polygons for plotting.

Patterns

Free collection of beautiful patterns for all vector formats.

Scribbbles

100+ vectorised scribbbles to spice up your design projects.

Utility

Nucleo App

A powerful application to collect, customise and export all your icons.

Checklist design

A collection of the best UX and UI practices.

Design System Repo

A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.

CSSPeeper

Inspect styles in a simple, well-organised & beautiful way.

AI Image Upscaler

Enlarge and enhance images automatically using AI.

Conclusion

I hope you enjoyed this list of free tools and resources. Please feel free to share your favorite ones by replying below.

0 notes

laurelkrugerr · 5 years ago

Text

Staying Connected And Learning From Each Other

About The Author

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris …

A month is a long time to stay on top of things. Here you’ll find an overview of everything we’ve been working on and have also enjoyed reading over the past month. Of course, you can always find us on Twitter, Facebook and LinkedIn, and also stay updated with our RSS feed as well as our Smashing Newsletter (sent out every second week with all sorts of goodies!).

Digital space obviously has its challenges, but it also provides incredible opportunities for us to connect and learn in ways we just wouldn’t be able to do otherwise. The situation with COVID-19 has challenged us to consider ways in which we could offer a similar SmashingConf experience and access to experts just as in an in-person workshop — without needing to leave your desk.

With insightful takeaways, exercises, access to slides, recordings and friendly Q&As, it has been such an incredible experience already! We’ve had literally people from all over the world collaborating together on group exercises — something we’d never be able to achieve with an in-person event.

We’re looking forward to connecting with Brad Frost, Joe Leech, Miriam Suzanne and many others. Try spotting them, but don’t get too distratced by the Mouse!

And we’re just getting started! We already have a schedule of online workshops ready for you so you can start marking your calendars and join us anytime you like. What better way is there to boost your skills online and learn practical, actionable insights from experts in the industry — live!

Do you like what you see, but are worried about getting some time off from work? Well, you surely didn’t think we would leave your hanging? We know how difficult it can sometimes be, and so we’ve prepared a neat lil’ Convince-Your-Boss template to help you out. Good luck!

Ready For The Next Smashing Book?

That’s right! Paul Boag’s Click! Encourage Clicks Without Shady Tricks is currently in its final production stage and the pre-release starts on May 5. This practical guide has 11 chapters full of advice that can help you start improving your conversion rate in just a matter of simple steps. You can subscribe for a pre-order discount and be one of the first to get your hands on the book. Stay tuned!

Live UX Review With The Author

Next week, we’ll be hosting a Smashing TV webinar with Paul Boag who’ll be reviewing your websites and sharing some techniques you can use to improve conversion rates — without having to resort to any shady tricks. Tell me more →

As for the previous book, printed copies of The Ethical Design Handbook have made their way around the world, and we got to see some happy responses and thoughtful reviews. If you’d also like a copy, you can download a free PDF excerpt (5 MB) to get a first impression of the book — we’re sure you won’t be disappointed!

Also, in case you missed it, there is a Smashing Podcast episode featuring two of the authors of the book: Trine Falbe and Martin Michael Frederiksen. They discuss what it means for a design to be ethical, and how we can make improvements in our own projects.

Drew has also interviewed Laura Kalbag, Eduardo Bouças, Stéphanie Walter, and many more. You can subscribe and tune in anytime with any of your favorite apps!

Trending Topics On SmashingMag

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

“Best Practices With React Hooks” by Adeneye David Abiodun This article covers the rules of React Hooks and how to effectively start using them in your projects. Please note that in order to follow this article in detail, you will need to know how to use React Hooks.

“Inspired Design Decisions With Herb Lubalin” by Andy Clarke How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise SVGs and make SVG text accessible? In this article, we’ll explore just that.

“Baking Structured Data Into The Design Process” by Frederick O’Brien Retrofitting search engine optimization only gets you so far. As metadata gets smarter, it’s more important than ever to build it into the design process from the start.

“How To Make Life Easier When Using Git” by Shane Hudson You don’t need to know your trees from your dangling blobs. If you use Git every day and feel like it’s a juggling act, then here are some tricks and tips to help make your life a bit easier.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

Tips For Leading A Remote Team

Leading a remote design team can feel a bit daunting, especially if it’s your first time. Luckily, other people out there have found themselves in the same situation before and developed strategies to keep the team productive and effective, no matter where everyone might be located. Mark Boulton is one of them.

In light of recent events when many teams need to switch to remote work, Mark summarized some simple but useful approaches that have helped him leading remote teams for years. From continuing your team’s rituals to dealing with expectations on availability and coaching people through the ups and downs that working remotely brings along, Mark’s tips aren’t hard to adopt but they can make a real difference. (cm)

Getting To Grips With CSS Viewport Units

CSS Viewport units provide us with a way to size things in a fluid and dynamic way, without the need for JavaScript. If you haven’t gotten around to dive deeper into the topic yet, Ahmad Shadeed wrote a useful guide to CSS Viewport units.

Starting with a general overview of the viewport units vw, vh, vmin, and vmax, the guide covers how viewport units differ from percentages and explores practical use cases for viewport units and how to implement them in your projects. Just the push you might have needed to make the switch. (cm)

A Better File Uploader For The Web

Building a better file uploader for the web. That was the idea behind the JavaScript image uploader Uppload. Created by Anand Chowdhary, the image uploader is open-source and can be used with any file uploading backend. And with more than 30 plugins, it’s highly customizable, too.

Users can drag and drop their files to upload them or import from a camera, URL, or social media and a several other services (there’s even an option to take and upload a screenshot just by entering a URL). During the uploading process, users can apply effects to the images and adjust filters like brightness, contrast, and saturation. If that’s overkill for your project, you can select only what you need and treeshake the rest, of course. Uppload supports browsers down to IE10. Handy! (cm)

Open-Source Flip Counter Plugin

Do you want to count down to an event, visualize a fundraising campaign, or show a clock or sales counter? Then Rik Schennink’s Flip Counter might be for you. The plugin is open-source, mobile-friendly, easy to set up, and it gets by without any dependencies.

Apart from its ease of use and flexibility, Flip shines with the beautifully smooth animation that is used to flip the numbers on the cards. Depending on your use case, there are several presets that you can use as a starting point to build your flip counter. The visual style can be customized with CSS. A lovely little detail. (cm)

How To Write Good Email Code

Maybe you’ve been in that situation before where you had to code an HTML email but struggled with email code best practices. To help you master the challenge, Mark Robbins set up a library for good email code. You can simply copy and paste the code and use it in your emails or you can learn more about the theory behind it.

Priority lies in making sure the code is semantic, functional, accessible, and meeting user expectations, as Mark points out. Consistency between email clients and pixel perfect design are important, too, but always secondary. One for the bookmarks. (cm)

A Complete Solution For Tooltips, Popovers, And Dropdowns

If you’re looking for a quick and easy solution for tooltips, popovers, dropdowns, and menus, you might want to take a look at Tippy.js. The library provides the logic and styling involved in all types of elements that pop out from the flow of your document and get overlaid on top of the UI.

Tippy.js is optimized to prevent flipping and overflow, it’s WAI-Aria compliant, works in all modern browsers, and, so the promise, it even delivers high performance on low-end devices. You can style the elements with custom CSS and TypeScript is supported out of the box, too. Handy! (cm)

Open-Source Tool To Make Animated Product Mockups

What do you do when you’re missing a tool for a specific purpose? You build it yourself. That’s what Alyssa X did when she was looking for a tool to make animated GIFs and videos to showcase a product. Her take on the subject: Animockup.

With Animockup, you can showcase your product in action within a device mockup. Just drag some screen footage into the browser-based tool, and Animockup automatically places it into your desired mockup. You can add text, images, and adjust the styling, and choose from a selection of presets to optimize your mockup for sharing on Twitter, Dribble, Instagram and the like. A useful little helper. (cm)

Create CSS Color Gradients With Ease

Hand-picking colors to make a color gradient requires design experience and a good understanding of color harmony. If you need a gradient for a background or for UI elements but don’t feel confident enough to tackle the task yourself (or if you’re in a hurry), the color gradient generator which the folks at My Brand New Logo have created has got your back.

Powered by color gradient algorithms, the generator creates well-balanced gradients based on a color you select. There are four different styles of gradients that go from subtle to a mother-of-pearl effect and an intense, deep color gradient. You can adjust the gradient with sliders and, once you’re happy with the result, copy-paste the generated CSS code to use it in your project. Nice! (cm)

Collaborative Diagrams

Pen and paper are often hard to beat when you want to visualize an idea with a quick diagram. If you’re looking for a digital alternative that is just as straightforward and easy to use as your analog tools, you might want to check out Excalidraw.

Excalidraw is a virtual whiteboard that you can draw on. You can choose from a set of shapes, connect them with arrows or lines, add text, and color. There are some other styling options, too, but the tool is kept rather simple so that you can focus on what’s really important: visualizing your idea. A great feature that comes in especially handy now that a lot of teams work remotely: You can share a live-collaboration session with your team members or your clients. Export and save options are included, too, of course. (cm)

Mastering BEM Naming Conventions

BEM makes your code scalable and reusable, prevents it from becoming messy, and facilitates teamwork. However, even experienced CSS developers struggle with the naming conventions sometimes. To prevent you from getting lost in the BEM cosmos, the folks at 9elements put together the BEM Cheat Sheet with naming suggestions for some of the most common web components: breadcrumb navigation, buttons, cards, lists, tabs, form checkboxes, sidebars, and more.

If you want to dive in even deeper into the BEM methodology, Luke Whitehouse shares tips to tackle an ever-present issue in BEM: grandchildren, i.e. elements that are tied to another element, rather than to the block itself. Luke explores three different approaches to master the challenge: flattening the grandchildren and treating them as if they have no relation with their parent element, by creating new blocks, and by extending the BEM naming convention. A good read. (cm)

A Preserve For Classic Games

Do you feel nostalgic when you think of the video games you played back in the 80s and 90s? Well, why not take a little trip back to those days when games were just as much fun without the fancy effects they shine with today?

ClassicReload preserves more than 6,000 old retro games and abandoned OD/interfaces that you can play right in your browser. You can search for your favorite or browse the games by name, year, genre, and platform to discover something new. No matter if it’s The Oregon Trail, Prince of Persia, or Dangerous Dave you’ve been longing for for so long, if you’ve got a sweet spot for games, the site will keep you entertained for quite a while. (cm)

Managing HTML DOM And jQuery Alternatives

How do you manage HTML DOM with vanilla JavaScript only? Phuoc Nguyen collected 100 native DOM scripting snippets along with explanations on how to use them. The snippets are labeled by difficulty and range from basic (e.g. detecting if an element is focused) to more intermediate tasks like exporting a table to CSV and, finally, advanced use cases like creating a range slider.

Speaking of going vanilla: If you’re using jQuery in your projects, it might be a good idea to check if you actually need the additional dependency or if a few lines of utility code could do the trick. “You might not need jQuery” lists useful alternative code snippets that help you forgo jQuery. (cm)

Overly Descriptive Color Palettes

Have you ever considered combining snail-paced soft pink with unsealed mahogany and lousy watermelon as a color scheme for your next project? Well, what might sound a bit weird at first, is the concept behind colors.lol, a color inspiration site with “overly descriptive color palettes”, as its creator Adam Fuhrer describes it.

Created as a fun way to discover interesting color combinations, the palettes are hand-selected from the Twitter bot @colorschemez. The feed randomly generates color combinations and matches each color with an adjective from a list of over 20,000 words. Hiding behind the unusual names are of course real hex color values that you can use right away — #FDB0C0, #4A0100, and #FD4659 in the case of snail-paced soft pink and its fellas, for example. A fun take on color. (cm)

Flexible Repeating SVG Masks

Sometimes it’s a small idea, a little detail in a project that you tinker with and that you can’t let go off until you come up with a tailor-made solution to make it happen. Nothing that seems like a big deal at first glance, but that requires you to think outside the box. In Tyler Gaw’s case, this little detail was a flexible header with a little squiggle at the bottom instead of a straight line. The twist: to make the component future-proof, Tyler wanted to use a seamless, horizontal repeating pattern that he could color with CSS in any color he liked.

To get the job done, Tyler settled on flexible repeating SVG masks. SVG provides the shape, CSS handles the color, and mask-image does the heavy lifting by hiding anything in the underlying div that doesn’t intersect with the shape. A clever approach that can be used as the base for some fun experiments. (cm)

As a token of appreciation, Vitaly Friedman released his very own “Smart Interface Design Checklists”, a PDF deck with 150+ questions to ask when designing and building anything from hamburgers to carousels and tables. Subscribe to the newsletter below and get it in your inbox right away!

(cm, vf, ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/staying-connected-and-learning-from-each-other/ source https://scpie1.blogspot.com/2020/04/staying-connected-and-learning-from.html

1 note · View note

riichardwilson · 5 years ago

Text

Staying Connected And Learning From Each Other

About The Author

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris …

We’re looking forward to connecting with Brad Frost, Joe Leech, Miriam Suzanne and many others. Try spotting them, but don’t get too distratced by the Mouse!

Ready For The Next Smashing Book?

Live UX Review With The Author

Drew has also interviewed Laura Kalbag, Eduardo Bouças, Stéphanie Walter, and many more. You can subscribe and tune in anytime with any of your favorite apps!

Trending Topics On SmashingMag

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

Best Picks From Our Newsletter

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

Tips For Leading A Remote Team

Getting To Grips With CSS Viewport Units

A Better File Uploader For The Web

Open-Source Flip Counter Plugin

How To Write Good Email Code

A Complete Solution For Tooltips, Popovers, And Dropdowns

Open-Source Tool To Make Animated Product Mockups

Create CSS Color Gradients With Ease

Collaborative Diagrams

Mastering BEM Naming Conventions

A Preserve For Classic Games

Managing HTML DOM And jQuery Alternatives

Overly Descriptive Color Palettes

Flexible Repeating SVG Masks

(cm, vf, ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/staying-connected-and-learning-from-each-other/ source https://scpie.tumblr.com/post/615709373558390784

0 notes

douglassmiith · 5 years ago

Text

Staying Connected And Learning From Each Other

About The Author

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris …

We’re looking forward to connecting with Brad Frost, Joe Leech, Miriam Suzanne and many others. Try spotting them, but don’t get too distratced by the Mouse!

Ready For The Next Smashing Book?

Live UX Review With The Author

Drew has also interviewed Laura Kalbag, Eduardo Bouças, Stéphanie Walter, and many more. You can subscribe and tune in anytime with any of your favorite apps!

Trending Topics On SmashingMag

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

Best Picks From Our Newsletter

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

Tips For Leading A Remote Team

Getting To Grips With CSS Viewport Units

A Better File Uploader For The Web

Open-Source Flip Counter Plugin

How To Write Good Email Code

A Complete Solution For Tooltips, Popovers, And Dropdowns

Open-Source Tool To Make Animated Product Mockups

Create CSS Color Gradients With Ease

Collaborative Diagrams

Mastering BEM Naming Conventions

A Preserve For Classic Games

Managing HTML DOM And jQuery Alternatives

Overly Descriptive Color Palettes

Flexible Repeating SVG Masks

(cm, vf, ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/staying-connected-and-learning-from-each-other/

source https://scpie.weebly.com/blog/staying-connected-and-learning-from-each-other

0 notes

scpie · 5 years ago

Text

Staying Connected And Learning From Each Other

About The Author

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris …

We’re looking forward to connecting with Brad Frost, Joe Leech, Miriam Suzanne and many others. Try spotting them, but don’t get too distratced by the Mouse!

Ready For The Next Smashing Book?

Live UX Review With The Author

Drew has also interviewed Laura Kalbag, Eduardo Bouças, Stéphanie Walter, and many more. You can subscribe and tune in anytime with any of your favorite apps!

Trending Topics On SmashingMag

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

Best Picks From Our Newsletter

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

Tips For Leading A Remote Team

Getting To Grips With CSS Viewport Units

A Better File Uploader For The Web

Open-Source Flip Counter Plugin

How To Write Good Email Code

A Complete Solution For Tooltips, Popovers, And Dropdowns

Open-Source Tool To Make Animated Product Mockups

Create CSS Color Gradients With Ease

Collaborative Diagrams

Mastering BEM Naming Conventions

A Preserve For Classic Games

Managing HTML DOM And jQuery Alternatives

Overly Descriptive Color Palettes

Flexible Repeating SVG Masks

(cm, vf, ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/staying-connected-and-learning-from-each-other/

1 note · View note

siliconwebx · 6 years ago

Text

Animate a Blob of Text with SVG and Text Clipping

I came across this neat little animation in a designer newsletter — unfortunately, I lost track of the source, so please give a shout out if you recognize it! In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code.

The approach I took was to use SVG text as a clip path for an SVG background. We must use SVG text because CSS currently only allows us to animate the background with text clipping if the background is a GIF, which we’re not going to do.

Our first task is to create a background of different SVG shapes. Oval-y blobs work pretty well. The thing to make sure of is to match the size the artboard/canvas in whatever illustration app you’re using to the same dimension as the viewBox you want the final work to be. (In Inkscape, this option is under the Scale section of Document Properties.)

The goal is to cover most of the artboard with a variety of shapes. I've found that it looks best if some of the shapes overlap.

Next, we’ll create some text in a <clipPath>, group the objects that make up the background inside a <g> element, and apply a CSS clip-path on that group. Altogether it looks something like this:

At this point, all we get is some plain text because we haven’t gotten around to the background animation quite yet.

So what about that animation? We can use a relatively simple CSS animation like this:

/* Animate the background shapes */ #background path { animation: pulse 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Necessary to keep the SVG objects in place while scaling */ transform-origin: 50% 50%; transform-box: fill-box; } @keyframes pulse { /* Rotating it along with the scale makes it a little bit more fancy */ 0%, 100% { transform: scale(0) rotate(33deg); } 35%, 65% { transform: scale(1) rotate(0deg); } }

So far, so good.

transform-box: fill-box; is not supported in Internet Explorer or Edge at this point, so if you need to support those browsers, you’ll need to use a JavaScript workaround, like this one.

See the Pen Animated blob SVG text clipping effect - Pt. 1 by Zach Saucier (@Zeaklous) on CodePen.

We could start painting things in by hard-coding color values using a text or vector editor, but it's more fun to color the shapes dynamically. Something like this:

// Define an array of colors const colors = ['#f5a147','#51cad8','#112b39']; // Select the SVG paths var blobs = document.querySelectorAll("path"); // Randomly apply colors to the SVG fill property blobs.forEach(blob => { blob.style.fill = colors[Math.floor(Math.random() * colors.length)]; });

In order to change the text values for each iteration, we need to first add them to the SVG clip path.

<clipPath id="text" class="filled-heading"> <text y="70">We are</text> <text y="140">Creators</text> <text y="210">+Innovators</text> <text y="70">We are</text> <text y="140">Movers</text> <text y="210">+Shakers</text> <text y="70">We are</text> <text y="140">Stylish</text> <text y="210">+Techy</text> </clipPath>

Then we can either use CSS or JavaScript to reveal the lines of text in our preferred order. Unfortunately, we can't surround each section of <text> using a <g> element because <g> elements don't work inside of a clipPath. For this post, we’re going to split things up into three CSS animations, one for each group of three paths:

/* Selects paths 1-3 */ #textClip text:nth-of-type(n + 1):nth-of-type(-n + 3) { animation: showFirst 12s infinite; } /* Selects paths 4-6 */ #textClip text:nth-of-type(n + 4):nth-of-type(-n + 6) { animation: showSecond 12s infinite; } /* Selects paths 7-9 */ #textClip text:nth-of-type(n + 7):nth-of-type(-n + 9) { animation: showThird 12s infinite; } @keyframes showFirst { 0%, 33% { opacity: 1; } 33.0001%, 100% { opacity: 0; } } @keyframes showSecond { 33.0001%, 66% { opacity: 1; } 0%, 33%, 66.0001%, 100% { opacity: 0; } } @keyframes showThird { 66.0001%, 99.999% { opacity: 1; } 0%, 66%, 100% { opacity: 0; } }

That does the trick!

See the Pen Animated blob SVG text clipping effect - Pt. 2 by Zach Saucier (@Zeaklous) on CodePen.

At this point, we can have a little fun. For example, we can swap backgrounds for a different effect. I used Inkscape's star tool with three to four points to generate some random shapes (using Inkscape’s random parameter) and then colored them using a palette from one of the many color scheme generators (I used Palx) to produce this version:

See the Pen Animated blob SVG text clipping effect - Pt. 3 by Zach Saucier (@Zeaklous) on CodePen.

The backgrounds don't even need to fill up the entire background, depending on the effect that we want to create. For example, we could duplicate the text using a element and fill in the text using that as seen in this demo.

Or we could mix it up by rotating the background blobs like this:

See the Pen Animated blob SVG text clipping effect - Pt. 5 by Zach Saucier (@Zeaklous) on CodePen.

To make the colors change for every new set of words, we could use either a CSS or JavaScript for the animation. I used JavaScript (and moved the CSS animation that was hiding the text lines to the JavaScript):

See the Pen Animated blob SVG text clipping effect - Pt. 6 by Zach Saucier (@Zeaklous) on CodePen.

To center the text horizontally, add x="50%" text-anchor="middle" to each <text> element (Demo). Centering it vertically would take more manual calculation since we’re working with a multi-line format.

One of the nice things about this approach is that, since it uses SVG, it is responsive by default!

P.S. After I made this approach and was looking for the original GIF author, I came across another recreation by Martí Fenosa doing the same effect using a different approach. Check his demo out as well because it’s clever!

The post Animate a Blob of Text with SVG and Text Clipping appeared first on CSS-Tricks.

😉SiliconWebX | 🌐CSS-Tricks

#Silicon Web Design #Ahmedabad #India #Web Development #WPBeginner #Silicon URL #Web Site #Cloud Host

0 notes

beerplusplus · 5 years ago

Text

i have a lot of text files called “linkfarm-$TOPIC.md” that’s all links

here’s the last month or so’s worth of links from a growing file called “tab slurry.md” which is where i’ve been saving links (from e-newsletters, rss feeds, and twitter) of things that interest me but i don’t have the time to really really digest thoughtfully:

es218 https://www.bbc.com/worklife/article/20200121-why-procrastination-is-about-managing-emotions-not-time https://github.com/fpereiro/backendlore https://github.com/justinamiller/SoftwareArchitect https://evilmartians.com/chronicles/what-i-learned-as-a-developer-from-accidents-in-space https://github.com/anvaka/city-roads https://uxdesign.cc/burnout-the-ugly-side-of-ux-1a6b436a8f46 https://browserdefaultstyles.com/ ** - default browser styles for html elements https://logobly.com/colors/ https://inkbotdesign.com/futuristic-patterns-in-graphic-design/ https://www.psl.com/feed-posts/psl-studio-kill-xylo https://webflow.com/blog/ux-design-process https://blog.marvelapp.com/holistic-design-system/ https://uxdesign.cc/why-design-systems-fail-and-how-to-make-them-work-in-2020-c1eb89c35aa0es217 https://growth.design/case-studies/morning-brew-newsletter-retention/ https://onezero.medium.com/we-finally-figured-out-who-makes-wikihows-bizarre-art-6c5d69b71347 https://webflow.com/blog/ux-design-process https://digiday.com/media/publishers-planning-end-third-party-cookie/ https://www.booooooom.com/2020/01/22/artist-spotlight-liz-hernandez/ https://cdm.link/2020/01/how-not-to-vj/ https://medium.com/non-fiction/my-airbnb-story-cafb5cd7fcbe https://www.frankchimero.com/blog/2020/burnout-list/ https://uxdesign.cc/invisible-design-systems-7bb7fac53236 https://cdm.link/2020/01/painting-with-eurorack/ https://cdm.link/2019/05/frgtwn-video-art-gear/ https://theoutline.com/post/8589/podcast-ads-are-a-very-hot-media-trend-right-now https://theoutline.com/post/8590/the-myth-of-the-millennial-friendly-city https://blog.dashlane.com/dashlane-rebrand/ https://uxdesign.cc/rediscovering-information-architecture-8f27e5ac6257 https://designshack.net/articles/graphics/what-is-a-lookbook-examples https://www.webdesignerdepot.com/2020/01/how-to-keep-designing-when-tragedy-strikes/ https://theoutline.com/post/8604/jazz-guys-stereotypes-music-genre https://feltinstruments.com/Jasno https://www.awwwards.com/deplace-maison-a-case-study-by-niccolo-miranda.html https://reactnicedates.hernansartorio.com/ https://medium.com/@bluepnume/javascript-tree-shaking-like-a-pro-7bf96e139eb7es216 https://github.com/feathersjs/hooks https://github.com/FormidableLabs/spectacle https://raw.githack.com/FormidableLabs/spectacle/master/one-page.html#/ https://www.jackfranklin.co.uk/blog/letting-tools-make-choices/ https://dev.to/keydunov/d3-dashboard-tutorial-with-cube-js-ehb https://cube.dev/ https://www.jetbrains.com/lp/mono/ 😍 https://designsystemchecklist.com/category/design-language/ https://tiny-helpers.dev/ *** https://github.com/retejs/rete - awesome visual programming lib https://sscaffold-css.com/ - v nice css base lib - https://doc.sscaffold-css.com/ https://d3-dashboard.cube.dev/ - Learn how to build a D3 dashboard with an example in React, Material UI, and Cube.js. https://css-tricks.com/how-to-turn-a-procreate-drawing-into-a-web-animation/ - https://catalin.red/copy-clipboard-js/ https://github.com/rikschennink/fitty https://github.com/jxnblk/microicon/ - svg icon service (for prototyping) https://github.com/jxnblk/microicon/blob/master/icons.md https://palx.jxnblk.com/ ***** - PALX: AUTOMATIC UI COLOR PALETTE GENERATOR Provide a single color value and Palx returns a full-spectrum color palette, well suited for UI design and data visualizations that work harmoniously with brand colors. https://github.com/jxnblk/mdx-deck - generate presentation deck from mdx docs (include react components too) https://www.ths.nu/artwork/ - just a reminder, THS rules

es215 https://www.booooooom.com/2020/01/15/photographer-spotlight-bridget-collins/ https://react-spring-visualizer.com/ (cool lib? def cool design) http://harpjs.com/ https://v-fonts.com/ cute & weird https://medium.com/this-should-exist/prose-a-distraction-free-e-ink-laptop-for-thinkers-writers-4182a62d63b2 https://calcolor.co/ https://www.witchernetflix.com/ https://theoutline.com/post/8538/the-building-blocks-of-my-sanity-come-from-phone-tetris https://theoutline.com/post/8539/payless-shoesource-brands-come-back-from-the-death https://www.smashingmagazine.com/2020/01/mythical-man-month/ https://digiday.com/media/rundown-seeds-discontent-workplace/ https://uxdesign.cc/pet-peeves-of-a-designer-8-things-you-should-probably-stop-doing-5149f0357c28 https://github.com/sindresorhus/execa https://github.com/sindresorhus/open

es214 https://abduzeedo.com/node/85778 https://theoutline.com/post/8522/i-am-beginning-to-suspect-that-having-a-massive-following-on-youtube-does-not-make-people-happy https://dribbble.com/stories/2020/01/08/color-palette-exploration https://cdm.link/2020/01/roland-go-livecast/ https://www.newsweek.com/milky-way-huge-wave-collision-1480799 https://www.vox.com/recode/2019/12/10/18656519/what-are-cookies-website-tracking-gdpr-privacy https://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_fisher_price_by_pentagram.php https://fvsch.com/body-copy-sizes/ https://www.creativeapplications.net/member-submissions/loud-matter-utilising-classic-animation-techniques-in-a-custom-made-performative-instrument/ https://theoutline.com/post/8508/australia-fires-climate-change-response https://zenhabits.net/wolves/ https://theoutline.com/post/8509/revolution-q-conspiracy-theorists-media-literacy https://liveplanet.net/ https://ishadeed.com/article/min-max-css/ https://www.fastcompany.com/90444298/the-next-decade-of-design-is-about-fixing-a-century-of-excess https://www.smashingmagazine.com/2020/01/html5-article-section/ https://theoutline.com/post/8502/stop-giving-companies-free-money https://abduzeedo.com/node/85773 https://nplusonemag.com/online-only/paper-monument/free-your-mind/ https://theoutline.com/post/8506/how-to-be-wrong https://craft.js.org/

es213 https://www.dazeddigital.com/life-culture/article/47199/1/the-rise-of-the-personal-brand-how-selling-out-became-cool-in-the-2010 http://2012portal.blogspot.com/2019/01/bubbles-of-heaven.html https://www.fastcompany.com/90446035/is-the-era-of-major-rebrandings-over https://dev.to/codyhouse/flash-grid-learn-css-grid-by-building-a-grid-system-2c4f https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/ https://metatags.io/font-generator *** https://waitbutwhy.com/2020/01/its-2020-and-youre-in-the-future.html https://theoutline.com/post/8500/iraq-war-again-iran https://reallifemag.com/go-with-the-flow/ https://www.yanlinma.com/flat-ui-and-a-half/ https://www.filamentgroup.com/lab/dontbreakthings/ https://imagecompressor.com/ online image compression!

es212 https://redflag.org.au/node/6974?__cf_chl_jschl_tk__=164e8fca23f997b51cb1d7477d7183fcd32d0201-1578327352-0-AZM26jGLwfBWQGhEseObDxmXD8zi13qNGU4Z0fq1FJQ_h93flp_reQR8jt-jqrC0NK8IwGQCStI3_LpxMNXmPLFCy-5j4U_OvW760__ihYrbKqta2A4D1oD35XJbZEn0HDHbtWsBsO_kXkA4HYzjBt3NlCglpDON6xacsxOnR1JmSvFHDL9421iwXmu0f6e0WZMnWeLiBhbxtOK6WJ4BIifTtXxTGrBjUMXkLV-mj0fqTdqaqComlJGlLn0brjp1DMTP6XiL_NtZsH_2dtDPlq0 | How the rich plan to rule a burning planet | Red Flag https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc | Neumorphism will NOT be a huge trend in 2020 - UX Collective https://blogs.scientificamerican.com/beautiful-minds/why-creativity-is-a-numbers-game/?utm_source=UX+Links&utm_campaign=478290dccf-UX_Collective&utm_medium=email&utm_term=0_44948c461b-478290dccf-105921921 | Why Creativity Is a Numbers Game - Scientific American Blog Network https://www.nytimes.com/interactive/2019/12/02/nyregion/nyc-subway-map.html?utm_source=UX+Links&utm_campaign=478290dccf-UX_Collective&utm_medium=email&utm_term=0_44948c461b-478290dccf-105921921 | The New York City Subway Map as You’ve Never Seen It Before - The New York Times https://generative-placeholders.glitch.me/?utm_source=UX+Links&utm_campaign=478290dccf-UX_Collective&utm_medium=email&utm_term=0_44948c461b-478290dccf-105921921 | Generative Placeholders https://hackernoon.com/7-hard-truths-about-starting-a-career-as-a-developer-z56u301p | 7 Hard Truths for New Software Developers - By Fahim ul Haq https://thoughtbot.com/blog/five-tips-for-more-helpful-code-reviews | 5 Tips for More Helpful Code Reviews https://undraw.co/illustrations | Illustrations | unDraw https://github.com/sw-yx/spark-joy | sw-yx/spark-joy: ✨😂easy ways to add design flair, user delight, and whimsy to your product. https://www.thirtythreeforty.net/posts/2019/12/my-business-card-runs-linux/ | My Business Card Runs Linux • &> /dev/null https://github.com/tiehuis/2048-cli | tiehuis/2048-cli: The game 2048 for your Linux terminal (https://github.com/gabrielecirulli/2048) https://github.com/imsnif/bandwhich | imsnif/bandwhich: Terminal bandwidth utilization tool (formerly known as "what") https://blog.emberjs.com/2019/12/20/octane-is-here.html | Ember.js - Octane is Here https://thehustle.co/price-tags-retail-markdowns/ | Inside the secret world of price tag codes https://twitter.com/awwstn/status/1213215748979445761 | Austin Petersmith on Twitter: "1 like = 1 fun fact about SaaS pricing" / Twitter https://cbor.io/ | CBOR — Concise Binary Object Representation | Overview https://tjcx.me/posts/i-wasted-40k-on-a-fantastic-startup-idea/ | I wasted $40k on a fantastic startup idea https://lethain.com/digg-acquihire/ | How the Digg team was acquihired. https://twitter.com/chris_herd/status/1212412869251350529 | Chris Herd on Twitter: "The 2020s will be known as the Remote Work decade A few predictions of what is likely to emerge [ a thread ] 💻🏠🌍" / Twitter https://www.theatlantic.com/technology/archive/2020/01/ice-contract-github-sparks-developer-protests/604339/ | ICE Contract With GitHub Sparks Developer Protests - The Atlantic https://www.theatlantic.com/technology/archive/2017/05/rethinking-ethics-training-in-silicon-valley/525456/ | Rethinking Ethics Training in Silicon Valley - The Atlantic

es211 https://www.inc.com/nate-klemp/try-this-neuroscience-based-technique-to-shift-your-mindset-from-negative-to-positive-in-30-seconds.html https://www.cbc.ca/radio/thesundayedition/the-sunday-edition-for-may-12-2019-1.5130771/too-much-niceness-is-bad-for-critical-thinking-michael-s-essay-1.5130792 http://bofh.bjash.com/ https://blog.robertelder.org/linux-productivity-tips/ https://github.com/spypunk/sponge https://www.buzzfeednews.com/article/katherinemiller/the-2010s-have-broken-our-sense-of-time https://coss.media/ https://react.design/terminal https://blog.stephaniestimac.com/posts/12-29-2019-bullet-journal/ https://towardsdatascience.com/a-data-visualization-adventure-55876196f7f8

es210 https://viljamis.com/2019/why-we-use-web-components/ https://www.smashingmagazine.com/2019/12/things-stop-doing-mobile-app-design/ https://uxdesign.cc/neumorphism-will-not-be-a-huge-trend-in-2020-67a8c35e52cc https://theoutline.com/post/8479/the-decade-in-cancellation https://theoutline.com/post/8480/unpopular-opinions-twitter-please-stop https://jeffhuang.com/designed_to_last/ https://www.rtlstyling.com/ https://medium.com/swlh/re-imagining-the-bottom-navigation-bar-f6f4cb64afa6 https://www.zerohedge.com/news/2019-09-04/will-everything-change-2020-2025-or-will-nothing-change https://generative-placeholders.glitch.me/ https://uxdesign.cc/accessibility-tools-for-designers-and-developers-ea400a415c0a https://www.webdesignerdepot.com/2019/12/metatags-101-a-simple-guide-for-designers/ https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/ https://nypost.com/2019/12/28/ghost-boat-with-decapitated-heads-corpses-washes-up-in-japan/ https://theoutline.com/post/8484/sore-winners-decade http://endoftheamericandream.com/archives/earths-ecosystems-are-on-a-collision-course-with-extinction-insect-populations-have-declined-by-up-to-98-percent-in-some-areas-of-the-world

es209 https://css.gg/ https://www.24a11y.com/2019/select-your-poison/ https://abduzeedo.com/node/85750 https://photostockeditor.com/ https://www.bravostudio.app/ https://www.theatlantic.com/technology/archive/2019/12/from-prison-to-silicon-valley/603406/ https://blog.prototypr.io/8-tips-choosing-the-right-font-for-your-design-5b1060fae6d8 https://krabby.netlify.com/ https://design.google/library/google-design-2019/ https://medium.com/@zbigniewgecis/good-enough-design-how-to-boost-your-efficiency-e49abcfe5d76 https://mystery.knightlab.com/ | The SQL Murder Mystery https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs | GistPad - Visual Studio Marketplace https://runninginproduction.com/interviews/9-running-a-website-monitoring-service-with-a-boring-technology | Running a Website Monitoring Service with a Boring Technology — Running in Production Interview 9 http://web.eecs.utk.edu/~azh/blog/challengingprojects.html | Challenging projects every programmer should try - Austin Z. Henley https://www.scmp.com/news/china/society/article/3042991/china-flight-systems-jammed-pig-farms-african-swine-fever | China flight systems jammed by pig farm’s African swine fever defences | South China Morning Post https://github.com/dwarvesf/hidden | dwarvesf/hidden: A ultra-light MacOS utility that helps hide menu bar icons https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api | Best Practices for Designing a Pragmatic RESTful API | Vinay Sahni https://github.com/paulirish/lite-youtube-embed | paulirish/lite-youtube-embed: A faster youtube embed. https://instadeq.com/blog/posts/things-end-users-care-about-but-programmers-dont/ | Things end users care about but programmers don't | Instadeq Blog https://github.com/tj/staticgen | tj/staticgen: Static website generator that lets you use HTTP servers and frameworks you already know https://selfhostedsource.tech/ | Lucid Index https://chrisbowler.com/journal/naming-things | Finding the right name • chrisbowler.com https://www.figma.com/blog/the-rise-of-ux-ui-design-a-decade-in-reflection/?utm_source=UX+Links&utm_campaign=afd3f133c6-UX_Collective&utm_medium=email&utm_term=0_44948c461b-afd3f133c6-105921921 | "The Decade of Design”: How 10 years transformed design’s role in tech https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6 | Neumorphism in user interfaces - UX Collective https://www.websitecarbon.com/ | Website Carbon Calculator | How is your website impacting the planet?

es208 https://medium.com/playstudio/what-its-like-managing-10-million-users-as-a-solo-developer-6f55ba9e8f14 https://theoutline.com/post/8453/a-good-place-going-home-with-google-street-view http://m.nautil.us/blog/this-test-for-machine-consciousness-has-an-audience-problem https://24ways.org/2019/flexible-captioned-slanted-images/ https://www.designsystems.com/starting-a-newsletter-is-the-best-thing-you-can-do-for-your-design-system/ https://flowingdata.com/2019/12/19/best-data-visualization-projects-of-2019/ https://cdm.link/2019/12/mutek-japan-visuals-2019/ https://www.newfangledaudio.com/elevate https://24ways.org/2019/there-is-no-design-system/ https://vimeo.com/367853694 Marcy Sutton on Garbage Pail Components at SmashingConf NYC 2019 https://www.dan-davies.co.uk/print-to-css https://illlustrations.co/ https://www.smashingmagazine.com/2019/11/online-environments-older-users/ https://www.smashingmagazine.com/2019/11/future-beyond-writing-great-code/ https://blog.coleadership.com/how-to-make-sense-of-your-impact-when-youre-no-longer-coding/

es207 https://brainworldmagazine.com/how-our-dreams-ready-us-to-face-our-fears/ https://logicmag.io/nature/water-is-life-nick-estes-on-indigenous-technologies/ https://hackernoon.com/new-job-imposter-syndrome-wj4d30yx https://hackernoon.com/how-to-launch-a-product-successfully-1zr32sg https://brettterpstra.com/2019/12/17/tm-wrapper-for-tmux-redux-with-fish-tab-completion/ https://designshack.net/articles/software/zenscrape/ https://tannerchristensen.com/blog/2019/12/16/everything-is-as-simple-or-complex https://dropbox.design/article/a-love-letter-to-spreadsheets https://www.booooooom.com/2019/12/18/artist-spotlight-bradley-kerl/ https://www.webdesignerdepot.com/2019/12/less-is-almost-definitely-more-an-introduction-to-hicks-law-for-web-designers/ https://theoutline.com/post/8442/internet-nostalgia-2010s-geocities-tumblr- https://zenhabits.net/manage-time/ https://www.factmag.com/2019/12/17/techno-is-technocracy/ https://doist.com/blog/organize-your-life/ https://www.reddit.com/r/sysadmin/comments/eaphr8/a_dropbox_account_gave_me_stomach_ulcers/ https://fivethirtyeight.com/features/millennials-are-leaving-religion-and-not-coming-back/ https://github.com/ziishaned/dumper.js https://blog.atulr.com/nodegui-intro/ https://www.theverge.com/2019/12/16/21021005/google-youtube-moderators-ptsd-accenture-violent-disturbing-content-interviews-video https://gothamist.com/news/e-bikes-amazon-ups-delivery-immigrants https://emilkowalski.github.io/css-effects-snippets/ https://dev.to/emmawedekind/10-html-element-you-didnt-know-you-needed-3jo4 https://frontendmasters.com/books/front-end-handbook/2019/ https://theoutline.com/post/8444/customs-and-border-patrol-is-cutting-corners-to-put-boots-on-the-border https://theoutline.com/post/8445/defense-of-the-microwave https://rangle.io/blog/styled-components-styled-systems-and-how-they-work/ https://theoutline.com/post/8446/bowl-shaped-mugs-are-bullshit https://m.signalvnoise.com/only-15-of-the-basecamp-operations-budget-is-spent-on-ruby/ https://theoutline.com/post/8451/the-wework-effect https://responsivebreakpoints.com/ https://www.smashingmagazine.com/2019/12/struggling-handle-traffic-surges/ https://www.core77.com/posts/91822/Meet-the-Dutch-Company-Transforming-Plastic-Debris-into-Floating-Parks

0 notes

egoisttheme · 6 years ago

Link

This theme is named Egoist and was partly inspired by the American TV series Suits (hence the title!) as well as the Japanese animation series Psycho Pass. This theme was made in conjunction with the #NoJSChallenge and like the name implies, it was made with only HTML and CSS.

I am not a god, but the following features were made without scripts in this theme:

Photoset with adjustable gutters (thanks to annasthms and espoirthemes for the amazing CSS photosets!)

Photo (and photoset) lightboxes

Slide-out menu

Tooltips

I had a lot of fun making this theme and I hope you enjoy it! :)

0 notes

chrissyrholmes · 6 years ago

Text

SVG Filter Resources and Demos

If you’ve used CSS, you might have worked with CSS filters before. Sadly, these are somewhat limited, so you’ll often need to break out Photoshop to get the effect you’re looking for. That’s where SVG filters come in!

SVG filters are simply effects that can be applied to images and even text, but you can do much more than is possible with CSS. Blurs, drop shadows, animations, and other effects that you can often only find in advanced graphics editing programs are all available to you.

Ready to learn? These resources, demos, and tutorials will teach you to use these super helpful filters.

SVG Filters 101

For those looking to learn SVG filters, this page is the best place to start. Codrops introduces you to SVG filters with its helpful online tutorial. It’s not a short read, but by the end, you should have a basic understanding of SVG filters and be ready to apply them on your own site!

The Art Of SVG Filters And Why It Is Awesome

This tutorial gets a bit more into the meat of things, showing you primarily how to style text with filters. There’s code for lighting effects, noise, strips, outlines, and all sorts of other neat effects. This normally takes a fair bit of skill with outside programs to get it right, but you can do it just with some lines of code.

Stranger Things Logo in SVG

Here’s a cool example of what you can pull off with these filters. This “Stranger Things” logo is rendered in nothing but SVG, complete with the spooky flicker effect and neon lighting.

Image Distortion Effects with SVG Filters

Looking for a cool image distortion effect? Three interesting hover effects are showcased here, along with a few tutorials so you can learn to create your own.

SVG Filters Playground

This is a tremendous resource for new programmers. Here’s a sandbox for you to test out and play with various SVG filters, applied to both images and text! And if you like the effect you made, you can even copy it and try it on your own site.

Using SVG to Create a Duotone Effect on Images

Duotone images are quite popular thanks to Spotify, but you don’t need to learn how to use gradient maps to create one. Just pop in this code and you can create your own gorgeous duotone images!

Gooey Text Background With SVG Filters

The “gooey” filter is used to create a blob-like object similar to a cell. You can also use it to make a rounded background for your text. And the best part is, it’s a dynamic filter that changes to fit the text size!

Ripple (SVG Filter + CSS)

Here’s a weird, colorful ripple effect made with a combination of SVG and CSS! It might make a great background or banner for part of a webpage. Here’s the magic: it’s just a bunch of straight, rotating lines with a displacement map filter.

Image Transitions Using SVG Filters

Sick of boring blurs and slides in image transitions? Here’s something more interesting: a dynamic dissolve transition effect that cycles between multiple images.

Motion Blur Effect Using SVG Filters

Another cool transition effect, this one is a slider that applies a motion blur and squishes the image as it transitions. No more simple sliders; make your site stand out with a pleasing animation.

Mastering SVG Filters

For web designers and developers, it’s important to always be learning new skills. SVG filters can save a lot of time that might have been spent in a graphics editing program. Instead, just pop in some code and you have a professional image filter effect – simple as that!

Now that you’re a master of SVG filters, it’s time to get out there and start designing a beautiful website.

from Web Designing https://1stwebdesigner.com/svg-filter-resources-and-demos/

0 notes

holytheoristtastemaker · 5 years ago

Link

Photos & Videos

Illustrations

Palette

Typography

Animations & Effects

Iconography

Patterns & Shapes

Utility

Photos & Videos

Coverr

Beautiful, free videos for your homepage background.

Mixkit

Awesome stock video clips, stock music & premiere pro templates all completely free!

Pexels

The best free stock photos & videos shared by talented creators.

Photo Creator

Create realistic stock photos from thousands of models, objects, and backgrounds.

Unscreen

Remove video and GIF backgrounds 100% automatically.

Remove Background

Remove the background of any image 100% automatically.

Generated Photos

The most practical way to get high-quality generated faces for commercial content.

Duotone

Convert any photo to a duotone in seconds.

Illustrations

Open Peeps

100% free hand-drawn illustration library.

Smash Illustrations

Free mix & match illustration constructor.

Open Doodles

A collection of free sketchy illustrations.

Control Illustrations

108 free flat illustrations with customisable characters.

Ouch!

Free vector illustrations to class up your project.

Avataaars Generator

A simple web app for generating hand-drawn avatars.

Faux Code Generator

Turn real code (Github Gist) into faux code (SVG image).

Palette

Parametric Color Mixer

A colour palette composer inspired by audio parametric equalisers.

CSS Gradient

A simple and colorful CSS gradient generator.

Colorsinspo

Thousands of beautiful colour palettes you can use in one click.

Color Hexa

A free colour tool providing information about any colour and generating matching colour palettes, shades/tints for your designs.

Color Space

Generate nice colour palettes, gradients, and matching colour schemes for your next project!

Palettte App

Create, analyse and edit smooth colour palettes.

Colorable

A colour combination contrast tester.

Typography

Freebiesbug (free fonts)

Handpicked free fonts and typefaces for web and graphics designers.

Fonts Arena

Free fonts, and free alternatives to premium fonts.

Befonts

Download the free fonts for personal or commercial use.

Font Squirrel

Download thousands of completely legal, high quality, free fonts.

Fontjoy

Easily mix and match different Google Fonts for the perfect pairing.

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different web fonts.

Animations & Effects

Smooth Shadow Generator

Make a smooth shadow with easing curves.

CSSeffectsSnippets

A collection of CSS effects made with Vue.js.

Separator Generator

A collection of customisable CSS section separators, with the possibility to easily copy the code.

Animista

A place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Draggable

A lightweight, responsive, modern drag & drop library.

Block Reveal Effects

Ideas for revealing content in a schematic box look.

Iconography

IconStore

A library of free vector icons for personal and commercial projects, designed by first-class designers.

CSS Icons

Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM & API.

Icon Transition Generator

Create a snappy transition between two icons and download the SVG code.

Tilda Icons

A collection of 700+ free icons for landing pages.

Ikonate

Fully customisable & accessible vector icons.

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Animated Icons

400 free animated icons downloadable in JSON for Lottie, GIF, and After Effects format.

Patterns & Shapes

CSS Patterns

CSS only library to fill your empty background with beautiful patterns.

Get Waves

A simple web app to generate svg waves, unique every time.

Blob Maker

Create organic SVG shapes in just a few seconds.

Rad Lines

A web tool for generating SVGs of polygons for plotting.

Patterns

Free collection of beautiful patterns for all vector formats.

Scribbbles

100+ vectorised scribbbles to spice up your design projects.

Utility

Nucleo App

A powerful application to collect, customise and export all your icons.

Checklist design

A collection of the best UX and UI practices.

Design System Repo

A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.

CSSPeeper

Inspect styles in a simple, well-organised & beautiful way.

AI Image Upscaler

Enlarge and enhance images automatically using AI.

Conclusion

I hope you enjoyed this list of free tools and resources. Please feel free to share your favorite ones by replying below.

0 notes

simplypsd1 · 6 years ago

Text

SVG Filter Resources and Demos

Ready to learn? These resources, demos, and tutorials will teach you to use these super helpful filters.

SVG Filters 101

The Art Of SVG Filters And Why It Is Awesome

Stranger Things Logo in SVG

Here’s a cool example of what you can pull off with these filters. This “Stranger Things” logo is rendered in nothing but SVG, complete with the spooky flicker effect and neon lighting.

Image Distortion Effects with SVG Filters

Looking for a cool image distortion effect? Three interesting hover effects are showcased here, along with a few tutorials so you can learn to create your own.

SVG Filters Playground

Using SVG to Create a Duotone Effect on Images

Duotone images are quite popular thanks to Spotify, but you don’t need to learn how to use gradient maps to create one. Just pop in this code and you can create your own gorgeous duotone images!

Gooey Text Background With SVG Filters

Ripple (SVG Filter + CSS)

Image Transitions Using SVG Filters

Sick of boring blurs and slides in image transitions? Here’s something more interesting: a dynamic dissolve transition effect that cycles between multiple images.

Motion Blur Effect Using SVG Filters

Another cool transition effect, this one is a slider that applies a motion blur and squishes the image as it transitions. No more simple sliders; make your site stand out with a pleasing animation.

Mastering SVG Filters

Now that you’re a master of SVG filters, it’s time to get out there and start designing a beautiful website.

from 1stWebDesigner http://bit.ly/2W1pZJd

SVG Filter Resources and Demos Read more on: The Simply PSD Blog

from http://bit.ly/2W5GhB3

0 notes

iyarpage · 6 years ago

Text

What’s New for Designers, January 2019

New year, new design tools. As your start regrouping and reorganizing in 2019, why not make good on those resolutions and try a new design element or two. We’ve got plenty to choose from here.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

UI Bundle

UI Bundle is a search tool to help you find fonts, icons, UI kits, mockups and more design goodies. You can browse options right on the home screen or use the search bar to find the perfect set of tools. And the best part? All of the tools and resources are free to download and use.

Rakuten RapidAPI

Rakuten RapidAPI helps you discover and connect to APIs in the world’s largest hub. Search for popular, recommended or task specific APIs, test in-browser and connect using code snippets. Plus, you can manage it all from a single dashboard.

Free Image and Photo Resizer

Free Image and Photo Resizer gets your images ready for website and social media use without expensive software. Just upload your image and the tool will create a crop that fits common social media channels and web specifications. You can also create custom sizes.

SVG Gradient Map Filter

SVG Gradient Map Filter is a nifty little tool that puts a great color overlay on images. You can use ready-made palettes or edit them and get yours.

WebsiteVoice

WebsiteVoice turns text into high-quality audio for users who want to listen to your content. (We all know that voice interfaces are all the rage!) Voice interfaces can increase user engagement, accessibility and help grow followers and subscribers to content. The tool is customizable and free.

Screen.Guru

Screen.Guru takes all the guesswork out of creating clean website screenshots. Just enter a URL and get a grab that you can use in projects.

Blobmaker

Blobmaker helps you create trendy bubbles and blobs for website designs. With plenty of settings to tweak this is as fun to play with as it is useful.

Pika

Pika is a “search engine” for finding modern packages on npm. You can browse and search for smaller, faster JavaScript bundles.

UI Sounds

UI Sounds shows what a noisy place the internet has become. It’s a collection of all the beeps, dings and ditties that are part of our everyday browsing habits.

Magic Sketchpad

Magic Sketchpad uses machine learning to finish your doodles and sketches. It’s pretty addictive to play with.

Essentials Icon Pack

Essentials Icon Pack is a set of common icons that work for pretty much every project. The tool from InVision is based on their most popular icons and includes 140 icons.

Vector Icons

Freebiesbug has a set of 150 vector icons that are free to try. The set includes plenty of icons in multiple categories – weather, music, health, food and more – in colored, outline and monochromatic options. Each comes in AI, EPS and PNG format for easy customization and scalable use.

UI Logos

UI Logos is a collection of free professional logo placeholders for projects. There are more than 25 logos and a plugin to help you get elements that will make your mockups look more polished. It works with Sketch and Adobe XD.

Space Marble Backgrounds

Space Marble Backgrounds is a fun set of background images with a design that’s out of this world! The collection includes 12 handmade options for a variety of project types.

Social Meet Up UI Kit

Social Meet Up UI Kit is a free collection of Adobe XD with more than 80 screens in six categories to speed up your workflow for projects. Everything is customizable and comes with a pretty nifty color and typography palette that you can use (or not).

Design Camera

Design Camera is an app for your Mac that lets you create, capture and animate 3D mockups for your digital designs in a matter of seconds. Designers from Shopify, Google, Starbucks, Uber, Sketch and Dropbox are already in the beta.

CSS Puns

CSS Puns is sure to make you giggle … if you understand code anyway. Play with the tool only or buy merchandise if there’s a pun you really like.

Material Design Palette Generator

Material Design Palette Generator pulls the colors of Material Design out of Google’s documentation for easy use. Turn a hex code into a full palette right on the screen.

Alvaro

Alvaro is a condensed sans serif display font that’s made to be big. It includes 221 characters in an uppercase style.

Classical Monoline Script

Classical is a fun and readable script that has a neutral feel. It includes beautiful upper- and lowercase options as well as alternates, ligatures and swashes.

Honeymoon Avenue Serif Font

Honeymoon Avenue Serif Font is a modern style serif with alternating thin and thick stroke widths. It’s a little on the thin side and is easy to read. The free version includes uppercase letters.

PT Root

PT Root is part of the PT Root typeface family. It includes four styles of normal proportions intended for screen reading, interfaces, websites and wayfinding systems. PT Root is a modern uniwidth sans serif whose individual character widths are constant across all weights.

Soulcraft

Soulcraft is a free OpenType variable font designed with the idea of emulating vernacular lettering. You can change the width and slant of each individual character without relying on pre-defined font weights.

The Rustic

The Rustic is a simple uppercase display typeface in a fun style. It includes alternates for an interesting look.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;} What’s New for Designers, January 2019 published first on https://medium.com/@koresol

0 notes