Pixel Art to CSS

基于 React 的像素绘画应用
授权协议 MIT
开发语言 JavaScript HTML/CSS
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 不详
投 递 者 訾淇
操作系统 Windows
开源组织
适用人群 未知
 软件概览

Pixel Art to CSS 是一个基于 React 的在线像素绘画编辑器,简单好用,功能齐全。

你可以绘制像素版的图片或者 GIF 动图,绘制完毕后可以一键获取对应的 CSS 代码。

尝试一下

使用以下技术构建:

  • React:用于构建 UI 的库。

  • Redux:实现类似 Flux 的架构。

  • ImmutableJS:有助于保持数据不变。

  • PostCSS: 处理应用程序的CSS。

  • NodeJS + Express:(服务器端构建通用应用程序,创建和服务生成的图纸)。

  • CSS是一种独特的语言。乍一看,这似乎很简单,但是,某些在理论上看起来很简单的效果在实践中往往不那么明显。 在本文中,我将分享一些在大多数CSS教程中不太可能找到的有用技巧。 1. Sticky Footer 这个非常常见的需求,但对于初学者来说可能是个难题。 对于大多数项目,不管内容的大小,都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口,页脚应该进行调整。 在CSS3之前,如果不知道脚

  •   Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是GitHub上的热门开源项目。前端的核心是js. > CSS知识点 Centering in CSS: A Complete Guide- https://css-tricks.com/centering-css-complete-guide/ CS

  • 如今很多艺术被超清,高像素图片掩盖了光芒,像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了,它们又一次告诉了我像素艺术多么的了不起。 很酷不是吗?像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。 这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念,建立一个可以在其他地方可用的模式。 创建栅格 首先,我们需要一个画布来绘制这个杰作。我们

  • 转载自CSS Sprites: Image Slicing’s Kiss of Death。本地使用markdown对原文进行了编辑,调整了格式。 CSS Sprites: Image Slicing’s Kiss of Death Back when video games were still fun (we’re talking about the 8-bit glory days her

  • 原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待! 像素艺术作为一种遗失的艺术形式,与超清晰,高分辨率图片相比黯然失色。我在 CodePen 上浏览时偶然发现了一些像素艺术,它提醒我这种艺术是多么令人敬畏! See the Pen Pikachu pixel css by Devi Krisdia

  • CSS是一种独特的语言。乍一看,这似乎很简单,但是,某些在理论上看起来很简单的效果在实践中往往不那么明显。 在本文中,我将分享一些在大多数CSS教程中不太可能找到的有用技巧。 1. Sticky Footer 这个非常常见的需求,但对于初学者来说可能是个难题。 对于大多数项目,不管内容的大小,都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口,页脚应该进行调整。 在CSS3之前,如果不知道脚

  • Project Description We hired P2H to assist us in developing the HTML/CSS frontend for a new website. We provided Sketch designs files to them that needed to be developed into responsive HTML/CSS files

  • 译者:前端小智 原文:medium.com/@bretcamero… CSS是一种独特的语言。乍一看,这似乎很简单,但是,某些在理论上看起来很简单的效果在实践中往往不那么明显。 在本文中,我将分享一些有用的技巧和技巧,它们代表了我在学习CSS过程中的关键进展。本文并不是要演示CSS可以变得多么复杂。相反,它分享了一些在大多数CSS教程中不太可能找到的有用技巧。 想阅读更多优质文章请猛戳GitHub

 相关资料
  • 问题内容: 我想将图像的颜色基础从RGB更改为其他颜色。我有一个要应用于每个像素的RGB的矩阵M,我们可以将其定义为x ij。 我目前正在迭代NumPy图像的每个像素并手动计算Mx ij。我什至无法对它们进行矢量化处理,因为RGB是1x3而不是3x1数组。 有一个更好的方法吗?也许是OpenCV或NumPy中的函数? 问题答案: 记不清执行此操作的规范方法(可能避免了转置),但这应该可行: 如果是

  • 我的窗口(SWT)中有以下UI布局: null null 如果我删除它,那么闪烁和重复的调用就消失了,但是我仍然不能显示任何大于5x5的图像,它们根本不会显示。 这是怎么回事..?我应该切换到GridLayout吗?我基本上只想显示两个组,每个组将包含一个字段/画布的垂直列表。

  • 我使用的是OpenJDK 11: openjdk版本“11.0.1”2018-10-16 openjdk运行时环境18.9(构建11.0.1+13) openjdk 64位服务器VM 18.9(构建11.0.1+13,混合模式) 试图让一个应用程序在JPanel中绘制一些东西,我注意到一些恼人的不准确之处。 然而,当精确度真的很重要时,如何使它像素级完美呢?

  • 本文向大家介绍p5.js绘制创意自画像,包括了p5.js绘制创意自画像的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了p5.js绘制自画像的具体代码,供大家参考,具体内容如下 绘制结果 人物头上的呆毛会一直运动,鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动,而且人物的眼睛也会一直看向小猫的方向 代码介绍 整个图全部由贝塞尔曲线,直线和圆组成 贝塞尔曲线的代码结构大概就是 控制

  • 我有以下代码应该在图像中绘制线条。我的代码是: 如果我编写,它实际上可以工作。但是我的数组很长并且来自一个输入。

  • 除了把画布绘图保存到本地存储或离线数据库,我们也可以使用data URL把画布绘图保存为图像,以便用户再把它保存到本地计算机。本节,我们将获取画布绘图的data URL,再把它设置为image对象的源,以便用户可以右击,作为PNG图像进行下载。 绘制步骤 按照以下步骤,把画布绘图另存为图像: 1. 定义画布上下文,并绘制一幅云状图形: window.onload = function(){

  • 问题内容: 该脚本绘制控件,英雄,表面和地图: 有一个英雄,当玩家使用控件移动他时必须重新绘制,所有其他可绘制对象也必须重新绘制。问题在于绘制地图是一个漫长的过程,因此我创建的地图越大,英雄移动的速度就越慢,因为必须绘制地图的每个图块。有没有一种方法可以将所有图块以其他方法放置到一个位图,然后在canvas方法中绘制该位图? 问题答案: 最好的选择是只绘制地图在屏幕上可见的部分。这样,无论整个地图

  • > 我有一张NxM大小的原始图像(FigureB-它是原始图像的蓝色香奈儿),从这张图像中我选择一个特定的区域来研究(NewfigureB),大小120x170; 然后我将这个区域划分为我所说的宏像素,即10x10的数据点(像素)阵列; 我然后在所选区域上涂上掩膜,只选择符合一定发光条件的点; 到目前为止,这是我想出来的。如有任何帮助,将不胜感激。 多谢