#brand: | Explore Tumblr Posts and Blogs

aesharecom · 2 days

Text

Social Media Collection Fcpx | VideoHive 27973566

Requires Plugins No Software Version Apple Motion 5, Final Cut Pro X Resolution Resizable File Size 138MB Direct Download Direct Download is available for Premium Users only Read the full article

#account #animation #blog #branding #MisterFlashStore

0 notes

jcmarchi · 22 days

Text

Managing User Focus with :focus-visible

New Post has been published on https://thedigitalinsider.com/managing-user-focus-with-focus-visible/

Managing User Focus with :focus-visible

This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look at :focus-visible and how to use it in your web sites!

Focus Touchpoint

Before we move forward with :focus-visible, let’s revisit how :focus works in your CSS. Focus is the visual indicator that an element is being interacted with via keyboard, mouse, trackpad, or assistive technology. Certain elements are naturally interactive, like links, buttons, and form elements. We want to make sure that our users know where they are and the interactions they are making.

Remember don’t do this in your CSS!

:focus outline: 0; /*** OR ***/ :focus outline: none;

When you remove focus, you remove it for EVERYONE! We want to make sure that we are preserving the focus.

If for any reason you do need to remove the focus, make sure there is also fallback :focus styles for your users. That fallback can match your branding colors, but make sure those colors are also accessible. If marketing, design, or branding doesn’t like the default focus ring styles, then it is time to start having conversations and collaborate with them on the best way of adding it back in.

What is focus-visible?

The pseudo class, :focus-visible, is just like our default :focus pseudo class. It gives the user an indicator that something is being focused on the page. The way you write :focus-visible is cut and dry:

:focus-visible /* ... */

When using :focus-visible with a specific element, the syntax looks something like this:

.your-element:focus-visible /*...*/

The great thing about using :focus-visible is you can make your element stand out, bright and bold! No need to worry about it showing if the element is clicked/tapped. If you choose not to implement the class, the default will be the user agent focus ring which to some is undesirable.

Backstory of focus-visible

Before we had the :focus-visible, the user agent styling would apply :focus to most elements on the page; buttons, links, etc. It would apply an outline or “focus ring” to the focusable element. This was deemed to be ugly, most didn’t like the default focus ring the browser provided. As a result of the focus ring being unfavorable to look at, most authors removed it… without a fallback. Remember, when you remove :focus, it decreases usability and makes the experience inaccessible for keyboard users.

In the current state of the web, the browser no longer visibly indicates focus around various elements when they have focus. The browser instead uses varying heuristics to determine when it would help the user, providing a focus ring in return. According to Khan Academy, a heuristic is, “a technique that guides an algorithm to find good choices.”

What this means is that the browser can detect whether or not the user is interacting with the experience from a keyboard, mouse, or trackpad and based on that input type, it adds or removes the focus ring. The example in this post highlights the input interaction.

In the early days of :focus-visible we were using a polyfill to handle the focus ring created by Alice Boxhall and Brian Kardell, Mozilla also came out with their own pseudo class, :moz-focusring, before the official specification. If you want to learn more about the early days of the focus-ring, check out A11y Casts with Rob Dodson.

Focus Importance

There are plenty of reasons why focus is important in your application. For one, like I stated above, we as ambassadors of the web have to make sure we are providing the best, accessible experience we can. We don’t want any of our users guessing where they are while they are navigation through the experience.

One example that always comes to mind is the Two Blind Brothers website. If you go to the website and click/tap (this works on mobile), the closed eye in the bottom left corner, you will see the eye open and a simulation begins. Both the brothers, Bradford and Bryan Manning, were diagnosed at a young age with Stargardt’s Disease. Stargardt’s disease is a form of macular degeneration of the eye. Over time both brothers will be completely blind. Visit the site and click the eye to see how they see.

If you were in their shoes and you had to navigate through a page, you would want to make sure you knew exactly where you were throughout the whole experience. A focus ring gives you that power.

Demo

The demo below shows how :focus-visible works when added to your CSS. The first part of the video shows the experience when navigating through with a mouse the second shows navigating through with just my keyboard. I recorded myself as well to show that I did switch from using my mouse, to my keyboard.

Video showing how the heuristics of the browser works based on input and triggering the focus visible pseudo class.

The browser is predicting what to do with the focus ring based on my input (keyboard/mouse), and then adding a focus ring to those elements. In this case, when I am navigating through this example with the keyboard, everything receives focus. When using the mouse, only the input gets focus and the buttons don’t. If you remove :focus-visible, the browser will apply the default focus ring.

The code below is applying :focus-visible to the focusable elements.

:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold;

If you want to specify the label or the button to receive :focus-visible just prepend the class with input or button respectively.

button:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; /*** OR ***/ input:focus-visible outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold;

Support

If the browser does not support :focus-visible you can have a fall back in place to handle the interaction. The code below is from the MDN Playground. You can use the @supports at-rule or “feature query” to check support. One thing to keep in mind, the rule should be placed at the top of the code or nested inside another group at-rule.

<button class="button with-fallback" type="button">Button with fallback</button> <button class="button without-fallback" type="button">Button without fallback</button>

.button margin: 10px; border: 2px solid darkgray; border-radius: 4px; .button:focus-visible /* Draw the focus when :focus-visible is supported */ outline: 3px solid deepskyblue; outline-offset: 3px; @supports not selector(:focus-visible) .button.with-fallback:focus /* Fallback for browsers without :focus-visible support */ outline: 3px solid deepskyblue; outline-offset: 3px;

Further Accessibility Concerns

Accessibility concerns to keep in mind when building out your experience:

Make sure the colors you choose for your focus indicator, if at all, are still accessible according to the information documented in the WCAG 2.2 Non-text Contrast (Level AA)

Cognitive overload can cause a user distress. Make sure to keep styles on varying interactive elements consistent

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Firefox IE Edge Safari 86 4* No 86 15.4

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari 123 124 123 15.4

Links

0 notes

mahashankh · 2 months

Text

Digital Print Design: Most Beautiful In 2024

Understanding the Foundations of Print Design: Typography - The Backbone of Visual Communication

Typography, the art of arranging text, might seem like a simple detail in print design. But it's much more than just picking a pretty font. It's the fundamental language that forms the backbone of visual communication, carrying your message effectively to your audience. In this article, we'll delve into the three pillars of good typography: font selection, spacing, and hierarchy. Understanding the Foundations of Print Design: Typography - The Backbone of Visual Communication Color Theory in Print Design: Captivating Your Audience with Color Layout and Composition: Mastering the Art of Visual Organization Harnessing Technology in Print Design: From Traditional Craft to Digital Innovation Software Tools for Print Design: Unlocking Your Creative Potential Trends Shaping the Future of Print Design: A Greener and More Meaningful Path Interactive Print Design: Bridging the Gap Between Physical and Digital Experiences Personalization and Variable Data Printing: Creating Deeper Connections Through Tailored Experiences Challenges and Solutions in Print Design: Navigating the Terrain for Flawless Results Bridging the Gap Between Print and Digital: Creating Seamless Brand Experiences FAQs Based On Print Design 1. Font Selection and Legibility Choosing the right font sets the tone of your message. Imagine a bold, playful typeface conveying the seriousness of a legal document – it wouldn't work, right? So, how do you select the perfect font? - Consider your audience: A youthful magazine might use a whimsical font, while a financial report calls for a serif font conveying professionalism. - Understand the message: Playful fonts might work for invitations, while bold, clear fonts emphasize urgency in flyers. - Ensure readability: Choose fonts with good contrast between letterforms and avoid overly decorative types that hinder comprehension. Remember, clarity trumps aesthetics. Always prioritize a font that your audience can easily read and understand. read full details article visit on https://mahashankh.com/digital-print-design-most-beautiful-2024/ Read the full article

0 notes

baliportalnews · 3 months

Text

Shopee Super Awards 2023 Berikan Apresiasi Bagi 33 Brand, Seller, UMKM, Partner, hingga Creator

BALIPORTALNEWS.COM, JAKARTA - Shopee kembali menghadirkan Shopee Super Awards 2023 sebagai ajang penghargaan untuk memberikan apresiasi kepada pihak dan figur yang telah berkontribusi bagi perkembangan ekonomi digital bersama teknologi Shopee dalam satu tahun terakhir. Kolaborasi dan dukungan dari berbagai pihak termasuk mitra brand, mitra seller, UMKM, Partner, serta creator masuk ke dalam 33 Kategori penghargaan Shopee Super Awards 2023. Ajang ini juga dihadirkan untuk mengapresiasi dan menginspirasi seluruh pihak yang berada dalam ekosistem Shopee, untuk ke depannya bisa berkembang bersama. Direktur Eksekutif Shopee Indonesia, Christin Djuarto menyampaikan apresiasinya kepada para pemenang dan seluruh mitra yang terlibat. “Shopee mengucapkan selamat kepada seluruh pemenang Shopee Super Awards 2023. Terima kasih karena telah bersama melayani jutaan pengguna dan juga telah memilih Shopee untuk mengembangkan usahanya. Sejalan dengan komitmen #ShopeeAdaUntukSemua, kami ingin seluruh pengguna dan mitra mendapatkan kualitas layanan dan platform yang terdepan dan memberikan banyak peluang bagi perkembangan bisnis mereka. Pada saat yang bersamaan, kami berharap dapat menciptakan lebih banyak manfaat bagi pengguna serta terus memupuk kolaborasi yang kuat melalui berbagai inisiatif di masa mendatang,” ungkap Christin. Shopee Super Awards yang dihadirkan tidak hanya sebagai bentuk apresiasi Shopee kepada seluruh mitra yang telah berkolaborasi, tetapi juga diharapkan dapat menginspirasi para pelaku usaha lokal lainnya dalam mengembangkan serta memperkuat potensi bisnis mereka. Salah satu UMKM yang menerima penghargaan Shopee Super Awards 2023 dalam kategori Super Growing Export UMKM adalah Dushishoes yang menjual sepatu wanita lokal dan terus berupaya untuk selalu berkembang melalui ekosistem bisnis digital, hingga berhasil menembus pasar global melalui Program Ekspor Shopee. Diana Tan, pemilik Dushishoes asal Bogor tidak menyangka bisa mendapatkan penghargaan untuk salah satu kategori UMKM di tahun 2023. “Suatu kebanggaan dan pencapaian yang luar biasa bagi saya bisa terpilih menjadi pemenang Super Growing Export UMKM pada Shopee Super Awards 2023 ini. Di tengah kompetisi bisnis sepatu wanita yang semakin ketat, Dushishoes berusaha semaksimal mungkin untuk menawarkan produk berkualitas dengan harga yang kompetitif. Tidak lupa, penghargaan ini saya dedikasikan kepada seluruh pihak yang telah membantu sejak berdirinya Dushishoes, khususnya Shopee, yang terus membantu pengusaha lokal untuk mengembangkan bisnis melalui fitur, program, pelatihan, dan pendampingan yang diberikan. Semoga penghargaan semacam ini bisa terus menginspirasi pengusaha lokal lainnya untuk semakin berkembang bersama Shopee dan bisa berdaya saing global,” jelas Diana. Selain Diana, ada juga UMKM yang membawa pulang penghargaan untuk kategori Super Livestreamer UMKM yaitu Azella Collection yang menawarkan produk-produk mukena dan busana muslim. Bisnis milik Triana Saptiaji ini mengalami peningkatan penjualan berkat kegigihan mengembangkan usahanya melalui fitur Shopee Live.

Penampilan JKT48 yang Turut Memeriahkan Acara Shopee Super Awards 2023. Sumber Foto : Istimewa “Sejak bergabung dengan Shopee, saya mengikuti berbagai program dan memanfaatkan fitur yang ada untuk menunjang usaha, salah satunya fitur Shopee Live yang bisa meningkatkan penjualan hingga ribuan produk per hari, bahkan tidak menyangka bisa menang penghargaan sebagai Super Livestreamer UMKM. Terima kasih kepada Shopee, penghargaan ini memberikan semangat baru dan mendorong Azzela Collection untuk terus berinovasi menghadirkan produk unggulan,” jelas Triana. Penghargaan yang diberikan di Shopee Super Awards 2023, terbagi ke dalam beberapa segmen, diantaranya untuk Brand, Seller, UMKM, Partner, Affiliate Creator, Live Creator, Celebrity Creator, Video Creator, ShopeePay, dan ShopeeFood. Temukan daftar pemenang Shopee Super Awards 2023 dalam 33 Kategori terpilih di https://shopee.co.id/m/superawards-winner.(bpn) Read the full article

#BaliPortalNews #brand #Creator #partner #Seller #Shopee #ShopeeSuperAwards2023 #UMKM

0 notes

couponawk · 10 months

Text

Ways to Save Money by Using 47 Brand Discount Codes?

Table of Contents

1. Dose 47 Brand Offer Any Promo Codes?

2. Dose 47 Brand Offer Free Shipping?

3. Dose They Offer Student Discount?

4. What’s Their Return and Refund Policy?

5. How to Make an Exchange?

6. Dose 47 Brand Give Points or Perks for Regular Customers?

As the highest level of baseball in the world, the United States naturally regards baseball as its first sport. 47 Brand, the old American company which engaged in professional baseball cap design and sales, launched a new MLB baseball cap series each season. The brand combines vintage style and modern vibe, produce top headwear and clothing. Thanks to its attention to detail, it has become a high-end global sports and lifestyle brand and a franchise partner of four major professional sports leagues in the United States: MLB, NFL, NBA, NHL, and more than 900 universities. 47 Brand has a lot of fans, if you are one of them, you could use 47 Brand discount codes when buying, which is the most cost-effective way.

1. Dose 47 Brand Offer Any Promo Codes?

Yes, it does. 47 Brand promo codes make it easy for you to show love for your team. Use your 47 Brand coupon codes today to help you save on hats, t-shirts, long-sleeve shirts, sweatshirts, and more. This is a common and easy way for customers to get better prices. You can receive coupons from merchants on their official website and couponawk.com. Just choose the coupon you got from hotdeals page and apply it to your order from the selection above and enter when prompted during checkout. The appropriate amount will be automatically deducted from your final price. This brand has officially licensed headwear and apparel from your favorite pro and collegiate teams, with their exclusive coupons and discount codes, you can shop them your favorite stuff with greater savings.

2. Dose 47 Brand Offer Free Shipping?

Yes. To help you save money, they support free delivery when your order reaches more than 75 dollars. After you place your order, they will complete the shipment as soon as possible, and all orders eligible to free shipping will be shipped with UPS SurePost.You will receive a tracking number via email soon after it leaves their warehouse in Massachusetts. The tracking number will update as soon as the carrier scans the package into their system. Due to the limitation of distance, the free shipping offer is for US orders only, and they only provide international ship to Canada only.

3. Dose They Offer Student Discount?

Yes. College students enjoy preferential treatment without any minimum purchase amount as 20% off 47 Brand headwear and apparel. All students need to do is simply register with Student Beans to verify your student status and get your student discount, use it at the checkout to enjoy off your order today! When you generate a discount code there are two types of codes that you can use. Multiple-use codes can be used as many times as you like. Every time you go to use this offer you will be able to use the exact same code. Single-use discount codes can only be used once. Once you have generated code, a countdown will appear on the screen telling you how long you have until it expires. This will normally be around an hour. If you use this code you will have to wait until the countdown is finished before you can generate a new code for this brand. Thus, if you are an indecisive customer make sure you put everything in your basket at once, or you’ll have to wait for a new code if you decided to make a second order within the hour. 47 The brand kindly offers you this benefit, but you should pay attention that the Student Beans Discount cannot be used with any other promotions or discounts.

4. What’s Their Return and Refund Policy?

47 Brand is committed to helping you find the best headwear and apparel to let you out. But there could inevitably be one or two uncomfortable experiences. If you are not 100% satisfied with your order after receiving their products, you can simply return the product within 60 days of purchase, you can enjoy their service. They accept unwashed/unworn items in new condition with tags attached. Once they receive a return, please allow 7-10 days for processing. You will be notified once a return is initiated and your bank account will reflect the refund amount within 3-5 days.

5. How to Make an Exchange?

47 Brand does not offer traditional product exchanges generally but they could still accommodate. If you are willing to exchange your item for different size, color, or product, they suggest you simply send back the original item for a refund and place a new order on 47brand.com. However, please pay more attention to the inventory in case that the selected sizes and colors you are willing to exchange may sell out.

6. Dose 47 Brand Give Points or Perks for Regular Customers?

Yes. Customers can sign up for 47 Brand Family by filling their basic personal information on their membership plans page. All members are entitled to get free shipping on all orders, which need no more minimum purchases. Also, you can see the activity information of the subscription, and get the exclusive advanced access to their latest drops and releases. In addition, you could gain shopping rewards by creating an account for 20 points, Spending each dollar for 1 point, referring a friend to join for 90 points, making social interaction for 10 points, and gain 147 points on the day of your birthday. As for redeeming points, the policy is 60 points for 10% off discount, 90 points for 15% off discount, 120 points for 20% off, 1 point for one chance to enter the 1000 dollars 47 Brand Shopping Spree. If you want to know more about their account, you can check it on their official website. In a word, their account is very favorable for you.

The reason why 47 Brand attracts attention is that besides personalized goods and excellent quality, they also know how to care about the needs of consumers. Therefore, they will continue to offer concessions and 47 Brand discount codes, whether it is the official website or couponawk.com, you may find.

https://linkcoupon.wordpress.com/2023/06/10/ways-to-save-money-by-using-47-brand-discount-codes/

#'47 Brand

0 notes

lexprotector1-blog · 10 months

Text

Naked Licensing: A Legal and Financial Minefield | Trademark Registration

Trademarks are source identifiers that distinguish one product or service from others in the marketplace. They are visual, auditory, or even tactile indicators that consumers can use to identify the source of a good or service. When a trademark is distinctive, it allows consumers to make informed purchasing decisions and to build trust with the brand. Wherein, Trademark licensing is a contractual arrangement that allows the licensor to authorize the licensee to use its trademark in connection with the sale of goods or services. The licensee is typically required to adhere to certain quality control standards to ensure that the trademark is used in a way that does not dilute its value.

Naked licensing occurs when a trademark owner fails to adequately control the use of its trademark by licensees. This can lead to dilution of the trademark's distinctiveness, as well as consumer confusion about the source of the goods or services. When the owner of the trademark grants permission or a license to the third party and when the misuses the mark or does not use that mark in a way that is appropriate or has been told to use in such cases, the issue of naked licensing arises. So basically, it refers to a situation where brand owners fail to adequately control the use of their trademarks by licensees. The naked license created confusion in the mind of the public about what is the source of the mark. So as a result, the mark loses its value.

While talking about the Dos, when entering into licensing agreements, brand owners should draft comprehensive contracts that clearly define the terms and conditions of the license. The agreement should outline the scope of a license, specify their permitted users, establish quality control requirements, and include provisions for termination or remedial actions in case of non-compliance.

Neglecting to monitor licensees can result in unauthorized variations in brand usage or substandard product or service quality. Regular monitoring and open communication channels are vital to address any deviations or issues promptly.

Brand owners should actively monitor and audit the activities of their licensees to ensure ongoing compliance with quality control requirements. Regular monitoring can help identify deviations, address issues promptly, and maintain consistency in brand representation across different licensees. While talking about the Don’ts, Avoid entering into licensing agreements that lack clear provisions for quality control. Failing to include these provisions increases the risk of inadequate brand representation and potential dilution.

Neglecting to monitor licensees can result in unauthorized variations in brand usage or substandard product or service quality. Regular monitoring and open communication channels are vital to address any deviations or issues promptly.

Over-licensing occurs when a brand owner grants too many licenses, which can dilute the exclusivity and compromise quality control measures. It is important to carefully select licensees and maintain control over the number of licenses granted.

In the case of Coin Holdings Ltd. v. Trans Tyres (India) Pvt. Ltd.[1], the court held that the degree of control exercised by a licensor over its licensee is a critical factor in determining whether the licensing arrangement is valid. The court found that there are various dimensions in which control can be exercised or presumed, such as the right to inspect the licensee's methods and goods, the right to prescribe specifications and standards, and the right to terminate the license agreement. The court also found that the existing relationship between the licensor and the licensee can inherently imply the degree of control. For example, if the licensor is a well-known brand with a strong reputation, it is likely to have more control over the licensee than if it is a smaller, less well-known brand.

The court's decision in Coin Holdings is significant because it provides guidance to licensor and licensees on the degree of control that is necessary to ensure the validity of a licensing arrangement. The decision also highlights the importance of quality control in trademark licensing.

Legal Implications and Enforcement: Naked licensing can have legal ramifications, including potential trademark infringement claims. When a brand owner fails to maintain adequate quality control, it can result in the loss of trademark rights. To protect their brand, owners must be aware of the legal risks and enforce their rights by seeking remedies such as termination of the licensing agreement, seeking damages, or obtaining injunctions.

Naked licensing can have detrimental effects on a brand's reputation and distinctiveness. By adhering to the dos and don'ts of licensing, brand owners can protect their trademarks, maintain quality control, and preserve the integrity of their brands. This includes drafting clear licensing agreements, implementing effective quality control measures, and conducting regular monitoring. By prioritizing quality control and upholding brand standards, brand owners can ensure that licensed use of their trademarks enhances their reputation and adds value to their brand.

Blog Resource : https://lexprotector.com/blog/naked-licensing-a-legal-and-financial-minefield/

#trademark #trademark registration #trademark infringement #brand #brandregistration #brandprotection

0 notes

rastronomicals · 11 months

Photo

7:25 AM EDT June 11, 2023:

Shonen Knife - "Tortoise Brand Pot Scrubbing Cleaner’s Theme (Sea Turtle)" From the album Let's Knife (August 26, 1992)

Last song scrobbled from iTunes at Last.fm

Their first All-English album Lyrically, and their major label debut, not coincidentally. But also an album that reminds me of The Ramones and The Clash, and Tom Petty.

--

#Shonen Knife #Let's Knife #Tortoise Brand Pot Scrubbing Cleaner’s Theme (Sea Turtle)

0 notes

shlokaconcepts · 11 months

Text

Shloka Concepts : Driving Digital Triumph : Best Branding Agency In Bangalore

Shloka Concepts, the best branding agency in Bangalore is crucial to a company's ability to succeed online. They develop strategic and effective digital branding initiatives thanks to their in-depth knowledge of market dynamics, consumer behavior, and digital trends.

They build a strong online presence for brands by combining imaginative design, gripping storytelling, and cutting-edge technologies. Shloka Concepts makes sure that businesses successfully connect with their target audience and stand out in the crowded digital landscape by developing aesthetically pleasing websites, engaging social media campaigns, and optimizing online advertising.

They create a cohesive and memorable brand experience that resonates with customers, fosters brand loyalty and generates measurable business results in the marketplace by aligning brand messaging, values, and visual elements across various digital touchpoints.

To know more contact the details given below :

Phone number: +91 90081 10927

Email: [email protected]

Website: https://shlokaconcepts.com/

#Best branding agency bangalore #digital branding agency #branding #Branding solutions

0 notes

nevver · 2 years

Photo

Korn, Uli Westphal (because)

12K notes · View notes

nanaluvbug · 1 year

Photo

🧀🥪🌶️🥭 The Ravening War portraits 🧀🥪🌶️🥭

patreon * twitch * shop

[ID: a series of digitally illustrated portraits showing - top left to bottom right - Bishop Raphaniel Charlock (an old radish man with a big red head and large white eyebrows & a scraggly beard. he wears green and gold robes with symbols of the bulb and he smirks at the viewer) Karna Solara (a skinny young chili pepper woman with wavy green hair, freckled light green skin with red blooms on her cheeks. she wears a chili pepper hood lined with small pepper seeds and stares cagily ahead) Thane Delissandro Katzon (a muscular young beef man with bright pinkish skin with small skin variations to resemble pastrami and dark burgundy hair. he wears a bread headress with a swirl of rye covering his ears and he looks ahead, optimistic and determined) Queen Amangeaux Epicée du Peche (a bright mango woman with orange skin, big red hair adorned with a green laurel, and sparkling green/gold makeup. she wears large gold hoop earrings and a high leafy collar) and Colin Provolone (a scraggly cheese man with waxy yellow skin and dark slicked back hair and patchy dark facial hair. he wears a muted, ratty blue bandana around his neck and raises a scarred brow at the viewer with a smirk) End ID.)

#trw #the ravening war #dimension 20 #acoc #trw fanart #ttrpg #dnd #bishop raphaniel charlock #karna solara #thane delissandro katzon #queen amangeaux epicee du peche #colin provolone

2K notes · View notes

aesharecom · 3 days

Text

Dubstep Logo Reveal For Premiere Pro | VideoHive 48824009

Files Included Motion Graphics Template Files Software Version Premiere Pro CC, After Effects CC Resolution Resizable File Size 15.4MB Media Placeholders 1 Text Placeholders 3 Direct Download Direct Download is available for Premium Users only Read the full article

#2d #abstract #animation #brand #Pinch-Motion

0 notes

jcmarchi · 1 month

Text

Accessible Forms with Pseudo Classes

New Post has been published on https://thedigitalinsider.com/accessible-forms-with-pseudo-classes/

Accessible Forms with Pseudo Classes

Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is exactly where they are in the experience. Before we jump in, let’s get to the core of what web accessibility is.

Form Accessibility?

You have most likely heard the term “accessibility” everywhere or the numeronym, a11y. What does it mean? That is a great question with so many answers. When we look at the physical world, accessibility means things like having sharps containers in your bathrooms at your business, making sure there are ramps for wheel assisted people, and having peripherals like large print keyboards on hand for anyone that needs it.

The gamut of accessibility doesn’t stop there, we have digital accessibility that we need to be cognizant of as well, not just for external users, but internal colleagues as well. Color contrast is a low hanging fruit that we should be able to nip in the bud. At our workplaces, making sure that if any employee needs assistive tech like a screen reader, we have that installed and available. There are a lot of things that need to be kept into consideration. This article will focus on web accessibility by keeping the WCAG (web content accessibility guidelines) in mind.

MDN (Mozilla Developer Network)

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

This pseudo class is really great when you want to emphasize that the user is in fact interacting with the element. You can change the background color of the whole form, for example. Or, if focus is moved into an input, you can make the label bold and larger of an input element when focus is moved into that input. What is happening below in the code snippets and examples is what is making the form accessible. :focus-within is just one way we can use CSS to our advantage.

How To Focus

Focus, in regards to accessibility and the web experience, is the visual indicator that something is being interacted with on the page, in the UI, or within a component. CSS can tell when an interactive element is focused.

“The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.”

MDN (Mozilla Developer Network)

Always make sure that the focus indicator or the ring around focusable elements maintains the proper color contrast through the experience.

Focus is written like this and can be styled to match your branding if you choose to style it.

:focus * / INSERT STYLES HERE /*

Whatever you do, never set your outline to 0 or none. Doing so will remove a visible focus indicator for everyone across the whole experience. If you need to remove focus, you can, but make sure to add that back in later. When you remove focus from your CSS or set the outline to 0 or none, it removes the focus ring for all your users. This is seen a lot when using a CSS reset. A CSS reset will reset the styles to a blank canvas. This way you are in charge of the empty canvas to style as you wish. If you wish to use a CSS reset, check out Josh Comeau’s reset.

*DO NOT DO what is below!

:focus outline: 0; :focus outline: none;

Look Within!

One of the coolest ways to style focus using CSS is what this article is all about. If you haven’t checked out the :focus-within pseudo class, definitely give that a look! There are a lot of hidden gems when it comes to using semantic markup and CSS, and this is one of them. A lot of things that are overlooked are accessible by default, for instance, semantic markup is by default accessible and should be used over div’s at all times.

<header> <h1>Semantic Markup</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> <section></section> <section></section> <aside></aside> <footer></footer>

The header, nav, main, section, aside, and footer are all semantic elements. The h1 and ul are also semantic and accessible.

Unless there is a custom component that needs to be created, then a div is fine to use, paired with ARIA (Accessible Rich Internet Applications). We can do a deep dive into ARIA in a later post. For now let’s focus…see what I did there…on this CSS pseudo class.

The :focus-within pseudo class allows you to select an element when any descendent element it contains has focus.

:focus-within in Action!

HTML

<form> <div> <label for="firstName">First Name</label><input id="firstName" type="text"> </div> <div> <label for="lastName">Last Name</label><input id="lastName" type="text"> </div> <div> <label for="phone">Phone Number</label><input id="phone" type="text"> </div> <div> <label for="message">Message</label><textarea id="message"></textarea> </div> </form>

CSS

form:focus-within background: #ff7300; color: black; padding: 10px;

The example code above will add a background color of orange, add some padding, and change the color of the labels to black.

The final product looks something like below. Of course the possibilities are endless to change up the styling, but this should get you on a good track to make the web more accessible for everyone!

Another use case for using :focus-within would be turning the labels bold, a different color, or enlarging them for users with low vision. The example code for that would look something like below.

HTML

<form> <h1>:focus-within part 2!</h1> <label for="firstName">First Name: <input name="firstName" type="text" /></label> <label for="lastName">Last Name: <input name="lastName" type="text" /></label> <label for="phone">Phone number: <input type="tel" id="phone" /></label> <label for="message">Message: <textarea name="message" id="message"/></textarea></label> </form>

CSS

label display: block; margin-right: 10px; padding-bottom: 15px; label:focus-within font-weight: bold; color: red; font-size: 1.6em;

:focus-within also has great browser support across the board according to Can I use.

Conclusion

Creating amazing, accessible user experience should always be a top priority when shipping software, not just externally but internally as well. We as developers, all the way up to senior leadership need to be cognizant of the challenges others face and how we can be ambassadors for the web platform to make it a better place.

Using technology like semantic markup and CSS to create inclusive spaces is a crucial part in making the web a better place, let’s continue moving forward and changing lives.

Check out another great resource here on CSS-Tricks on using :focus-within.