Fundo pontilhado CSS
Este tutorial explica como criar um padrão pontilhado CSS usando SVG para obter um fundo CSS pontilhado em meio-tom. Meio-tom é uma técnica reprográfica que simula imagens em tons contínuos por meio do uso de um fundo de grade pontilhada, variando em tamanho ou espaçamento para gerar um efeito de gradiente. Criaremos esse efeito CSS de fundo pontilhado combinando gradientes, padrões e filtros SVG.
[ Hits: 1.723 ]
Por: John em 16/06/2025 | Blog: https://www.mockofun.com
<svg id="halftonePattern" width="100%" height="100%" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;">
<defs>
<!-- 1. Radial Gradient for Circles -->
<radialGradient id="radialBlackToTransparent" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="5%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</radialGradient>
<!-- 2. Circle Pattern -->
<pattern id="circlesPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="url(#radialBlackToTransparent)" />
</pattern>
<!-- 3. Linear Gradient Overlay -->
<linearGradient id="linearBlackToTransparent" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</linearGradient>
<linearGradient id="linearBlackToTransparentH" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:black; stop-opacity:0" />
<stop offset="50%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</linearGradient>
<radialGradient id="radialBlackToTransparentOverlay" >
<stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</radialGradient>
<!-- Hidden elements to be used as sources for feImage in the filter -->
<!-- These need explicit width/height matching the viewBox for feImage to capture them correctly -->
<rect id="circlesSourceLayer" width="100%" height="100%" fill="url(#circlesPattern)" />
<rect id="overlaySourceLayer" width="100%" height="100%" fill="url(#linearBlackToTransparent)" />
<!-- 4. SVG Filter -->
<filter id="blendAndThresholdFilter" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
<!-- Get the circles pattern as an image input -->
<feImage xlink:href="#circlesSourceLayer" result="circlesInput" x="0" y="0" width="100%" height="100%"/>
<!-- Get the linear gradient overlay as another image input -->
<feImage xlink:href="#overlaySourceLayer" result="overlayInput" x="0" y="0" width="100%" height="100%"/>
<!-- Blend them using 'multiply' -->
<feBlend mode="multiply" in="circlesInput" in2="overlayInput" result="multiplied" />
<feColorMatrix type="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 255 -128" />
</filter>
</defs>
<!-- Display the final result by applying the filter -->
<!-- The fill of this rect doesn't matter as the filter will generate the pixels -->
<!-- <rect x="0" y="0" width="100%" height="100%" fill="white" filter="url(#blendAndThresholdFilter)" /> -->
</svg>
<div style="box-shadow:0 0 0 0px red;margin:0;padding:0;">
<div style="width:100vw;height:100vh;filter:url(#blendAndThresholdFilter)"></div>
</div>
Google Maps API - Criando e interagindo com seus próprios mapas
Banda Larga é um direito de todos!
CSS - Manual de Estilo (parte 2)
Nenhum coment�rio foi encontrado.
Conciliando o uso da ZRAM e SWAP em disco na sua máquina
Servidor de Backup com Ubuntu Server 24.04 LTS, RAID e Duplicati (Dell PowerEdge T420)
Visualizar câmeras IP ONVIF no Linux sem necessidade de instalar aplicativos
Proteja seu Linux Mint com o Timeshift: Restaure o sistema mesmo que ele não inicie!
Instalando Google Chrome no Debian 13