使用表格创建像素画教程_派派后花园

用户中心 游戏论坛 社区服务
发帖 回复
阅读:230 回复:19

[家长里短] 使用表格创建像素画教程

刷新数据 楼层直达
裴之

ZxID:41972983


等级: 热心会员
配偶: 肚几
举报 只看楼主 使用道具 楼主   发表于: 12-06 0
如题。
效果如下:

大概思路:主要通过设置元素的阴影效果
首先创建两个嵌套的div标签,使用table标签也可以。
ps:其实创建一个也可以,但用嵌套的修改时候更方便~

那么基本的代码如下:
<div id="rq">
    <div id="te"></div>
</div>

对嵌套外的div设置。
#rq {
position: absolute;
}

接下来就是对id名为te的div元素进行样式设置。
对单个像素设定宽度和高度。
#te {
    height: 10px;
    width: 10px;
    box-shadow:
}
接下来就是重点!
怎么画出这一个个阴影块,并转换成样式代码
https://pixelartcss.com/
在这个页面下画出像素画,并将它生成的代码全部复制到#te选择器下。


ps:为了方便,使用原网页的选择器。
修改上面的代码,如下:
<div id="rq">
    <div id="pixelart-to-css"></div>
</div>

点击copy,将复制的代码填到{}里。
#pixelart-to-css{
# 这里是复制的代码
}


注意!!原代码是.pixelart-to-css,一定要改成#pixelart-to-css才可以。


因为嫌弃颜色不够还原,所以找了下星露谷原来的配色。
以下数值是从网上搜到的哈哈哈。
在嵌套的div上先列一下所需要用到的色号,以及位置。
#rq {
--brown: #6b3710;
--dark-red: #c22323;
--light-red: #ff4e23;
--yellow: #ffd921;
--white: #ffe1ae;
--tan: #dda059;
--dark-tan: #994f16;
position: absolute;
}

具体的阴影代码就不贴了,太长了。
感兴趣的话这里贴个表格代码。

不知道字数够不够小鱼缸。
付竹

ZxID:14378296


等级: 热心会员
财神爷保佑我中大奖/5.29
举报 只看该作者 19楼  发表于: 12-09 0
大佬又出新作
素月无心

ZxID:54204907


双字ID:素月,单字ID:無,10.3周年
举报 只看该作者 18楼  发表于: 12-09 0
让我看看看





茗日暮影

ZxID:14039875


等级: 派派版主
影子~随缘回礼,0225周年,0410转正~雪子~我来派派看你啦~
举报 只看该作者 17楼  发表于: 12-09 0
我来看看是什么




果爷。

ZxID:11955462


等级: 内阁元老
如果被狗咬了,怎么办?那就直接无视,谁让它又可怜又自卑
举报 只看该作者 16楼  发表于: 12-09 0
想看看

猫几°

ZxID:11230103


等级: 派派版主
配偶: 染丹青
2024,请对我好一点。
举报 只看该作者 15楼  发表于: 12-08 0
让我学习一下




rainlxsh

ZxID:3206502


等级: 素材组
顺其自然,为所当为
举报 只看该作者 14楼  发表于: 12-08 0
太牛了,膜拜一下



屹翼。

ZxID:99740253


命由己造,相由心生,世间万物皆是化相,心不动,万物皆不动,心不变,万物皆不变。
举报 只看该作者 13楼  发表于: 12-08 0
emmm,猛的一看没有懂,仔细一看还是不明白,昨天在PS点了半天,结果发现和图片不一致,像素比做图签还难


久川凪

ZxID:5427922


配偶: 久川颯
哒哒/解压乱码请更改TXT编码/连载文月更/周年3.27 8.28
举报 只看该作者 12楼  发表于: 12-08 0
玩出花样了哈哈哈
◎ 解压乱码请更改TXT编码 ◎ 书区+1点评请关闭提醒哟 ◎ 连载文月更勿催 ◎



pototo

ZxID:321766


等级: 热心会员
举报 只看该作者 11楼  发表于: 12-07 0
回复一下看看完整的帖子。
小手、揣兜

ZxID:8412342


记忆中的小时光  阵阵青草香  是谁把它留下来  留在老地方
举报 只看该作者 10楼  发表于: 12-07 0
收藏帖+1,请问有木有可以手机软件挂时间的方法昂昂昂,出个帖子吧!!

楼主留言:

换其他浏览器uc 360这种 或者换那些可以装脚本的浏览器 再安装脚本

小满胜万全

ZxID:15586801


等级: 文学之神
举报 只看该作者 9楼  发表于: 12-07 0
不明觉厉,虽然不是很懂,但是不妨碍我膜拜大佬!
乐锦。

ZxID:12798932


Lucky /不补番外 /1.18定期 /3.21活动
举报 只看该作者 8楼  发表于: 12-07 0
这是什么 康康

口十心

ZxID:14850312


等级: 派派文编
5-26/6-23,这里是阿思呀
举报 只看该作者 7楼  发表于: 12-07 0
太厉害了,马下来收藏吃灰吧

做梦有点难

ZxID:4720616


等级: 派派文编
举报 只看该作者 6楼  发表于: 12-07 0
虽然不会,但是觉得好厉害啊

游野

ZxID:49711899


等级: 派派贵宾
0123/1021
举报 只看该作者 5楼  发表于: 12-07 0
牛啊,派派算是让你玩出花了
pb私聊

网友小八

ZxID:99740304


举报 只看该作者 4楼  发表于: 12-06 0
厉害了,我要码住看看
姒墨妃墨。

ZxID:55531909


配偶: 七染
9.12/9.29/10.30周年(>ω・* )ノ
举报 只看该作者 地板   发表于: 12-06 0
又见教程
不明觉厉
码住

胖妞嘟嘟

ZxID:18683105


配偶: 奈何于微
不补番外~
举报 只看该作者 板凳   发表于: 12-06 0
感觉非常实用~~
标记一下,慢慢研究!
是不是其他地方也可以用上?(悄悄说:比如拼豆)


小暉暉、

ZxID:40967197


等级: 热心会员
人生就像蒲公英看似自由卻身不由己
举报 只看该作者 沙发   发表于: 12-06 0
哇厉害了
裴之棒棒

楼主留言:

贴贴ε٩(๑> ₃ <)۶з

发帖 回复