загашник с какулями

Айрис Мориарти · 01-04-2024, 10:48:36

тут будет оформление вскоре, возможно даже красивое
просто нужно место, куда буду какать картиночками из собственных генераций и прочей графикой

~~мама я художнег~~

пляжный вайб

Айрис Мориарти · 07-04-2024, 19:05:23

#cлучайные генерации, #эльф, #человек, #белые волосы
Микрободборка. Использовать можно, я не жадная.

"тык"

P.S: Если нужны генерации — обращаться в ЛС.

Айрис Мориарти · 10-04-2024, 03:01:42

@Силур "Скорч" Рейт твой жопобородый дроу :3

"фуллсайз"

Айрис Мориарти · 14-04-2024, 04:30:19

Пак (40шт) маско-аватарок для @Пустой

"тык"

Айрис Мориарти · 04-06-2024, 19:03:31

Код брать можно, стилизовать тоже можно на свое усмотрение.

Код Выделить

[safehtml]
<div class="chrono_section">
	<form>
    <p>фильтр по хронологии:</p>
    <label>
    	<input type="checkbox" name="active" checked />
    	активные
    </label>

    <label>
    	<input type="checkbox" name="end" checked />
    	законченные
    </label>

    <label>
    	<input type="checkbox" name="closed" checked />
    	закрытые
    </label>
	</form>

	<article><p class="categories" data-category="active"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="active"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="active"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>[дата] название эпизода</h2></a>
	</article>

</div>



<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
 * использовать :has() для фильтров
 * checkboxes. No JS
 */
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
	article:has([data-category="closed"]) {
	display: block;
}

article {}
article img {background: #491d15;}
article .categories {background: #491d15;}

/**/
.chrono_section {
    text-align: left;
    float: left;
    display: grid;
    gap: 3rem;
    padding: 20px;
    max-width: 690px;
    width: 100%;
    grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
    place-content: start center;
    margin: 0 auto !important;
    background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}

form {
    align-items: baseline;
    background: #1a1921;
    border: 1px solid #ddbf86;
    border-radius: 0.25rem;
    color: #e5debc;
    display: inline-table;
    text-align: center;
    gap: 1rem;
    grid-column: 1 / span 3;
    margin-block-end: 1rem;
    justify-content: center;
    padding: 1rem;
    font-family: lol;

	& p {
    color: #9a8b60;
    font: 300 2.2em lol !important;
    margin: 0px !important;
    padding: 0px !important;
    text-transform: uppercase;
	}
}

label,
input {
    color: #9a8b60;
    font: 300 1.3em  lol;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    padding: 0;
}

input {
	block-size: 1rem;
	inline-size: 1rem;
	position: relative;
	inset-block-start: 0.125rem;
}

article {
	container-type: inline-size;
	display: none;
	margin: 0;

	& img {
    aspect-ratio: 4 / 2;
    display: block;
    inline-size: 100%;
    border-radius: 0.25rem;
    object-fit: cover;
    border: 1px solid #2f2933 !important;
    box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
	}

	& h2 {
    color: #9a8b60;
    font: 300 1em lol !important;
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 5px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
	}

	& .categories {
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 0.8em !important;
    letter-spacing: 0.15em;
    line-height: 1 !important;
    margin: 0 !important;
    padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
    font-variant: small-caps;
	}

	& .categories::after {
    content: attr(data-category);
	}
}
</style>
[/safehtml]

Айрис Мориарти · 05-06-2024, 14:23:46

Второй вариант личной хронологии игры

Код Выделить

[safehtml]
<div class="chrono_section">
	<form>
    <p>фильтр по хронологии:</p>
    <label>
    	<input type="checkbox" name="active" checked />
    	активные
    </label>

    <label>
    	<input type="checkbox" name="end" checked />
    	законченные
    </label>

    <label>
    	<input type="checkbox" name="closed" checked />
    	закрытые
    </label>
	</form>

	<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="active"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="closed"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

	<article><p class="categories" data-category="end"></p><p class="qe">квест/эп</p><p class="lok">локация</p><p class="dat">год</p>
                <a href="#">
    <img src="https://dummyimage.com/200x100/dcd4ae/15141c"/>
    <h2>название эпизода или квеста</h2></a>
	</article>

</div>



<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>/*
 * использовать :has() для фильтров
 * checkboxes. No JS
 */
.chrono_section:has([name="active"]:checked) article:has([data-category="active"]) {display: block;}
.chrono_section:has([name="end"]:checked) article:has([data-category="end"]) {display: block;}
.chrono_section:has([name="closed"]:checked)
	article:has([data-category="closed"]) {
	display: block;
}

article {}
article img {background: #491d15;}
article .categories {background: #491d15;}

/**/
.chrono_section {
    text-align: left;
    float: left;
    display: grid;
    gap: 3rem;
    padding: 20px;
    max-width: 690px;
    width: 100%;
    grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
    place-content: start center;
    margin: 0 auto !important;
    background: linear-gradient(to right, rgba(13, 12, 14, 0.5) 1%, rgba(13, 12, 14, 0.5) 25%, rgba(13, 12, 14, 0) 50%, rgba(13, 12, 14, 0.5) 79%, rgba(13, 12, 14, 0.5) 98%), #221c27 url(https://forumstatic.ru/files/001b/8e/b8/23912.jpg) repeat fixed top left;}

form {
    align-items: baseline;
    background: #1a1921;
    border: 1px solid #ddbf86;
    border-radius: 0.25rem;
    color: #e5debc;
    display: inline-table;
    text-align: center;
    gap: 1rem;
    grid-column: 1 / span 3;
    margin-block-end: 1rem;
    justify-content: center;
    padding: 1rem;
    font-family: lol;

	& p {
    color: #9a8b60;
    font: 300 2.2em lol !important;
    margin: 0px !important;
    padding: 0px !important;
    text-transform: uppercase;
	}
}

label,
input {
    color: #9a8b60;
    font: 300 1.3em  lol;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    padding: 0;
}

input {
	block-size: 1rem;
	inline-size: 1rem;
	position: relative;
	inset-block-start: 0.125rem;
}

article {
	container-type: inline-size;
	display: none;
	margin: 0;

	& img {
    aspect-ratio: 4 / 2;
    display: block;
    inline-size: 100%;
    border-radius: 0.25rem;
    object-fit: cover;
    border: 1px solid #2f2933 !important;
    box-shadow: 0 0 0 2px #978660 inset, 0 0 0 2px #e2cf74 inset, 0 0 0 3px #c19f6b inset, 0 0 8px 0 rgba(199,169,60,.55);
	}

	& h2 {
    position: relative;
    background: #19171bcf;
    color: #9a8b60;
    font: 300 1em lol !important;
    margin-left: 1px !important;
    margin-right: -1px !important;
    padding: 5px !important;
    padding-bottom: 5px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    top: -65px;
    text-align: center;
	}

	& .categories {
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 0.8em !important;
    letter-spacing: 0.15em;
    line-height: 1 !important;
    margin: 0 !important;
    padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
    font-variant: small-caps;
	}

	& .categories::after {
    content: attr(data-category);
	}
}

article .qe, article .lok{    background: #312f3f;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 0.8em !important;
    letter-spacing: 0.15em;
    line-height: 1 !important;
    padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
    font-variant: small-caps;
    margin: 1px !important;}
 article .dat {    background: #312f3f;
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 0.75em !important;
    letter-spacing: 0.15em;
    line-height: 1 !important;
    padding: clamp(0.125rem, 2cqw, 0.25rem) !important;
    font-variant: small-caps;
    margin: 1px !important;}

</style>
[/safehtml]