SShortSingh.
TopTechnologyAI & MLStartupsProgrammingScienceBusinessFinanceCrypto & Web3World
Back to feed
Programming

Developer guide shows how to build Apple-style liquid glass effects with CSS and SVG

0
·1 views

A DEV Community tutorial explains how to recreate the liquid glass look popularized by Apple's 2025 design across iOS, iPadOS and macOS, using only CSS and SVG. The guide breaks the effect into five layers: a tint, backdrop blur and saturation, a specular rim, a diagonal sheen, and refraction. It notes that classic glassmorphism uses only the first three layers, while true liquid glass adds the sheen and refraction. Code examples include a dark-mode card and a light-mode variant, with advice on adjusting blur and rim highlights for light backgrounds.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingHacker News ·

Several Linux kernel vulnerabilities accidentally posted to public mailing list

Details of several Linux kernel security flaws were inadvertently published to the public Linux Kernel Mailing List, according to a Phoronix report. The disclosure appears to have occurred before the vulnerabilities were intended to become public, raising concerns about exposure. The article linked from the Hacker News post covers the incident and the broader trend it reflects. The available source material is limited to the link and metadata, so further specifics about affected versions or patches are not confirmed here.

0 comments Read more at Hacker News
0
ProgrammingDEV Community ·

Hidden text in PDFs could steer AI tools reading bank statements and invoices

A PDF can contain a hidden text layer that people never see but software reads, which becomes a risk when language models process documents. Redact reported in October that WhatsApp help pages carried hidden instructions aimed at an AI, found on 80 of 545 pages, which WhatsApp attributed to a bug and said targeted Meta's own chatbot. Financial documents are a concern because users increasingly ask models to read statements and invoices, and a researcher at Snyk showed in 2025 that white text in a statement PDF could shift a model's credit rating from poor to excellent. The author, who builds a template-based bank statement extractor with no model in its extraction path, tested whether hidden content could affect their own system by planting it in copies of a test statement. The writeup notes no public production case has been found so far.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Offline-First App Uses On-Device AI to Detect Crop Diseases in Central America

Smallholder farmers in Costa Rica and Central America often work in areas with little or no cellular coverage, making cloud-based disease diagnosis impractical. To address this, developers built HealthyCropping, an open-source, non-commercial Android app that runs its core functions, including photo capture, inference, and severity assessment, without an internet connection. The app uses specialist MobileNetV3 models for coffee leaves, cacao pods, and banana leaves, quantized to under 10 MB each and executed through native TFLite runtimes in under 50 milliseconds. To prevent accuracy loss from differences between Python training and mobile preprocessing, the team built a shared fixture test suite that checks for numerical parity between the two environments. Results are stored locally and synchronized to a cloud backend once connectivity returns.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Is it a button or a div? A quick check for keyboard-accessible clickable elements

Landing pages often contain elements that look like buttons, such as menu toggles and tabs, but are built as generic tags with click handlers. Such elements are not reachable by keyboard or announced correctly by screen readers, unlike native button elements. The W3C's WCAG 4.1.2 guidance requires that custom controls expose the correct name and role to assistive technology. The author also notes that a button inside a form submits by default unless type="button" is set. A simple test is to tab through the page, check each unreachable element's tag, and verify that Enter and Space activate it.

0 comments Read more at DEV Community
Developer guide shows how to build Apple-style liquid glass effects with CSS and SVG · ShortSingh